Open Sidebar

Welcome to prebuiltui!

Here, you can find a collection of free UI components built with Tailwind CSS. These components are designed to be simple, customizable, and easy to integrate into your project.

Before you start

• Tailwind CSS (v3.x or above)
• Basic knowledge of HTML and Tailwind classes
• No external dependencies (for most components)

Using Tailwind CSS in your project

If you already have Tailwind CSS set up in your project, you can simply use the components.

1. Install Tailwind CSS

terminal

Copy

npm install tailwindcss @tailwindcss/vite

2. Configure the Vite plugin

vite.config.js

Copy

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. Import Tailwind CSS

css

Copy

@import "tailwindcss";

4. Start your build process

terminal

Copy

npm run dev

5. For a simple Card Component

terminal

Copy

<div class="card bg-white p-6 shadow-lg rounded-lg">
  <h3 class="text-xl font-bold">Card Title</h3>
  <p>Card content goes here.</p>
</div>