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

1$ npm install tailwindcss @tailwindcss/vite

2. Configure the Vite plugin

vite.config.js

1import { defineConfig } from 'vite'
2import tailwindcss from '@tailwindcss/vite'
3export default defineConfig({
4  plugins: [
5    tailwindcss(),
6  ],
7})

3. Import Tailwind CSS

css

1@import "tailwindcss";

4. Start your build process

terminal

1$ npm run dev

5. For a simple Card Component

terminal

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