daisyui

daisyUI - Tailwind CSS Components

Usage no npm install needed!

<script type="module">
  import daisyui from 'https://cdn.skypack.dev/daisyui';
</script>

README

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

[ See all components ]

daisyUI 2.0


🌼 Features

show / hide
  • Tailwind CSS plugin
    daisyUI is a Tailwind CSS plugin. Install it and 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. Pure CSS. Works on all frameworks!

📀 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/daisyui@2.1.0/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

🚀 Use

Use component classes to build your UI.

<a class="btn">Hello!</a>

<input type="checkbox" class="checkbox" />

<input type="checkbox" class="toggle" />

<div class="alert alert-success">Message sent successfully</div>

👉 See all components
🎲 Try it online

📘 Documents + Examples

See the official site:
[ daisyui.com ↗︎ ]

🤝 Contributing

Read the documents for more info:
[ Read contribution guide ]

List of Components

show / hide

  • Actions

    • Button
    • Dropdown
    • Modal
    • Swap

  • Data display

    • Alert
    • Avatar
    • Badge
    • Banner
    • Calendar
    • Card
    • Carousel
    • Chat bubble
    • Collapse
    • Comment
    • Countdown
    • Empty placeholder
    • Kbd
    • Loading
    • Progress
    • Radial progress
    • Stat
    • Table
    • Tag
    • Timeline
    • Toast
    • Tooltip
    • Treeview

  • Data input

    • Checkbox
    • Text input
    • Radio
    • Range
    • Rating
    • Select
    • Textarea
    • Toggle
    • Upload

  • Layout

    • Artboard
    • Button group
    • Divider
    • Drawer
    • Footer
    • Hero
    • Indicator
    • Input group
    • Mask
    • Stack

  • Navigation

    • App bar
    • Breadcrumbs
    • Link
    • Menu
    • Navbar
    • Pagination
    • Steps
    • Tab

  • Mockup

    • Browser
    • Code
    • Phone
    • Window

Featured on:

show / hide

༼ つ ◕_◕ ༽つ Please share