Awesome Open Source
Awesome Open Source

Tailwind CSS Components
Adds components like btn, card and more to Tailwind CSS

[ See all components ]

DaisyUI



🌼 Features

  • Component classes: DaisyUI adds component classes to Tailwind. Classes like btn, card,… No need to deal with hundreds of utility classes.
  • Tailwind CSS plugin: DaisyUI is a Tailwind CSS plugin so you can simply add it to your tailwind.config.js file.
  • Based on design system: DaisyUI applies design system concepts to Tailwind CSS. All components on your page are committed to a single design system.
  • Customizable: You can customize the design of components with Tailwind utility classes and CSS variables.
  • Semantic color names: Use color names like primary, secondary, accent,… just like your design system defines.
  • RTL supported: Enable rtl config for right to left layouts.
  • Themeable: Add multiple themes or change colors with a CSS variable. You can even set a theme for a specific section of your page.
  • Designer-friendly: You can disable styled config and only get the skeleton of components. No style, no colors. You can style everything using utility classes.

👩‍💻 Install now!

npm i daisyui --save

Then add DaisyUI to your tailwind.config.js
[ Read more ]

module.exports = {

  plugins: [
    require('daisyui'),
  ],
  
  theme: {
    extend: {
      colors: require('daisyui/colors'),
    },
  },

}
Or use a CDN

Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and DaisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.


🎉 Use

Use component classes like btn, card, etc… to build your UI.

<a class="btn">Hello!</a>
<div class="shadow card">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2> 
    <p>Card text</p>
  </div>
</div> 

👉 See all components
🎲 Try it online


📘 Documents + Examples

Read the documents for more info
[ daisy.js.org ↗︎ ]

List of components
  • [x] Accordion
  • [x] Alert
  • [x] Artboard
  • [ ] App bar
  • [x] Avatar
  • [ ] Avatar group
  • [x] Badge
  • [ ] Banner
  • [x] Breadcrumb
  • [x] Button
  • [x] Button group
  • [ ] Calendar
  • [x] Card
  • [ ] Chat bubble
  • [ ] Comment
  • [ ] Countdown
  • [ ] Cover
  • [ ] Divider
  • [x] Drawer
  • [ ] Empty placeholder
  • [ ] Footer
  • [ ] Form
    • [x] Select
    • [x] Text input
    • [x] Text area
    • [x] Checkbox
    • [x] Radio
    • [ ] Range slider
    • [ ] Rating
    • [x] Toggle
    • [ ] Upload
  • [x] Hero
  • [ ] Loading
  • [x] Menu
  • [ ] Mockup
    • [ ] Browser
    • [x] Code
    • [x] Phone
    • [x] Window
  • [x] Navbar
  • [x] Modal
  • [x] Pagination
  • [x] Progress
  • [ ] Statistic
  • [ ] Steps
  • [ ] Tag
  • [x] Tabs
  • [ ] Timeline
  • [ ] Toast
  • [ ] Tooltip

༼ つ ◕_◕ ༽つ Please share


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,240
ui-components (315
design-patterns (184
postcss (171
css-framework (121
design-system (116
ui-design (105
design-systems (90
ui-kit (89
tailwind (76
tailwind-css (49
design-pattern (44
ui-library (20

Find Open Source By Browsing 7,000 Topics Across 59 Categories