Need help with daisyui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

saadeghi
267 Stars 9 Forks MIT License 337 Commits 1 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 91,249
CSS
Sass
tailwin...
tailwin...
336 commits

[![][logo-url]][docs-url]

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

[ [See all components][docs-url] ]

[![][tweet]][tweet-url]

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 ] ```js 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.

  • full.css [![][full-css]][full-css-url]
    Includes:

    • Tailwind's default config
    • DaisyUI components
    https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css

    [ [Browse other versions][docs-url-install] ]


🎉 Use

Use component classes like

btn
,
card
, etc… to build your UI.
html
Hello!
html

Card Title

Card text

👉 See all components
🎲 Try it online


📘 Documents + Examples

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

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

༼ つ ◕_◕ ༽つ Please share

[![][tweet]][tweet-url]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.