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
5.9K Stars 214 Forks MIT License 880 Commits 20 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 8,425
CSS
Sass
tailwin...
tailwin...
871 commits
# 1,706
steam
laravel...
laravel...
advent-...
36 commits
# 139,690
microse...
schema-...
HTML
tailwin...
6 commits
# 112,612
PHP
HTML
mvc-fra...
tailwin...
1 commit
# 158,563
PHP
HTML
Shell
redmine
1 commit
# 285,852
JavaScr...
node-js
css-fra...
design-...
1 commit
# 29,165
feather...
HTML
TypeScr...
MongoDB
1 commit
# 277,261
Shell
HTML
css-fra...
design-...
1 commit

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

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

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

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

daisyUI



🌼 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, no dependencies. Works on all frameworks and environments!

📀 Install now!

npm i daisyui

Then add daisyUI to your

tailwind.config.js

[ Read more ] ```js 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/[email protected]/dist/full.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css">

🚀 Use

Use component classes to build your UI.

html
Hello!
html

html

html
Message sent successfully

👉 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
  • 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
  • Stack
  • Stat
  • Steps
  • Tag
  • Table
  • Tabs
  • Timeline
  • Toast
  • Tooltip
  • Treeview

Featured on:

show / hide

༼ つ ◕_◕ ༽つ 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.