/daisyui

⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components

Primary LanguageVueMIT LicenseMIT

Tailwind CSS Components
Adds component classes like btn, card and more to Tailwind CSS

[ See all components ]

DaisyUI



🌼 Features

  • Tailwind CSS plugin
    DaisyUI is a Tailwind CSS plugin. Install it, add it to your tailwind.config.js file.
  • Component classes
    Adds component classes to Tailwind. Classes like btn, card,… So you will end up with a cleaner HTML.
  • Semantic color names
    Adds color names like primary, secondary, accent,….
  • Customizable
    You can customize the design of components with Tailwind utility classes and CSS variables.
  • Themeable
    Add multiple themes and customize colors. You can even set a theme for a specific section of your page.
  • RTL supported
    Enable rtl config for right to left layouts.
  • Pure CSS
    No script file, no dependencies. 2KB gzip!

📀 Install now!

npm i daisyui

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

module.exports = {

  plugins: [
    require('daisyui'),
  ],

}
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.*

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.11.0/dist/full.css" rel="stylesheet" type="text/css" />

🚀 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:
[ daisyui.com ↗︎ ]

List of components
  • Alert
  • Artboard
  • App bar
  • Avatar
    • Avatar group
  • Badge
  • Banner
  • Breadcrumb
  • Button
    • Button group
  • Calendar
  • Carousel
  • Card
  • Chat bubble
  • Collapse (Accordion)
  • Comment
  • Countdown
  • Cover
  • Divider
  • Drawer
  • Empty placeholder
  • Footer
  • Form
    • Select
    • Text input
    • Text area
    • Checkbox
    • Radio
    • Range slider
    • Rating
    • Toggle
    • Upload
  • Hero
  • Indicator
  • Kbd
  • Link
  • Loading
  • Menu
  • Mockup
    • Browser
    • Code
    • Phone
    • Window
  • Navbar
  • Mask
  • Modal
  • Pagination
  • Progress
  • Stat
  • Steps
  • Tag
  • Table
  • Tabs
  • Timeline
  • Toast
  • Tooltip
  • Treeview

༼ つ ◕_◕ ༽つ Please share