Getting Started

cross_icon

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 icon
1$ npm install tailwindcss @tailwindcss/vite

2. Configure the Vite plugin

vite.config.js

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

3. Import Tailwind CSS

css

Copy icon
1@import "tailwindcss";

4. Start your build process

terminal

Copy icon
1$ npm run dev

5. For a simple Card Component

terminal

Copy icon
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>
logo

Feature-Rich UI Library - Tailwind CSS Components.

Explore a growing library of over 250+ beautifully crafted, customizable components built with Tailwind CSS — perfect for any project any size.

Stay Updated with PrebuiltUI

Unlock expert tips, industry trends and exclusive resources— directly delivered in your inbox.

Copyright 2025 © PrebuiltUI All Right Reserved.