Create stunning user interfaces in minutes with our free collection of high-quality Tailwind CSS components.

Explore DuneUI →

🚀 Features

• 🎨 Modern designs ready for production.
• 📱 Responsive by default.
• ⚡ No extra dependencies, just TailwindCSS.
• ♿ Accessibility built-in (proper ARIA attributes and roles).
• 🔄 Easy customization with Tailwind utilities.

---

📦 Installation

Before using the components, make sure TailwindCSS is installed in your project. If you don’t have it yet, follow the official installation guide.

---

🛠 Usage

1. Find the component you want in the documentation.
2. Copy the component code.
3. Paste it into your project and tweak as needed.

Example: Basic Button

<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
  Click Me
</button>

---

📚 Included Components

• Buttons
• Forms & Inputs
• Cards
• Navbar
• Modals
• Tables
• Alerts & Notifications
• Badges & Labels
• Pagination
• … and more

---

🎯 Customization

Note

If you are using TailwindCSS version 4, the tailwind.config.js file is no longer necessary. Now, all your configurations and customizations must be done directly in the globals.css file. Check out the official documentation on how to do it correctly. TailwindCSS Docs

Note

If you are using TailwindCSS version 3, you will need to make the appropriate configurations in the tailwind.config.js file to adapt the components to your liking.

• You can customize colors, typography, and spacing directly from your tailwind.config.js file.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
      },
    },
  },
}

---

📄 License

This project is Open Source under the MIT License.

---

🤝 Contributing

If you’d like to add a new component or improve an existing one:

1. Fork the repository
2. Create a branch for your changes
3. Submit a pull request ¿Quieres que lo prepare así?