Tailwind CSS Components
Adds component classes like btn
, card
and more to Tailwind CSS
daisyUI
-
๐ [ See all components ] -
๐ Documents: daisyui.com -
๐ฒ Try it online: Tailwind Play | Codepen -
๐ฆ Source: GitHub | NPM | Unpkg | JSdeliver | cdnjs
๐ผ
Features
show / hide
- Tailwind CSS plugin
daisyUI is a Tailwind CSS plugin. Install it and add it to yourtailwind.config.js
file. - Component classes
Adds component classes to Tailwind. Classes likebtn
,card
,โฆ So you will end up with a cleaner HTML. - Semantic color names
Adds color names likeprimary
,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
Enablertl
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 ]
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.
<a class="btn">Hello!a>
<input type="checkbox" class="checkbox"/>">
<input type="checkbox" class="toggle"/>
<div class="alert alert-success"> Message sent successfully div>
๐
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
- Blogs
- Youtube videos
- Supabase & Sveltekit - Build Twitter in 75 minutes
- Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI
- Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI
- SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes
- DaisyUI : Worth a try or skip on by?
- How to use daisyUI in SvelteKit?
- DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)
- Next.js - Tailwind - DeisyUI Setup
- Courses
Feature Request: Config Option for Adding Prefix to Class Names
Hi all. Firstly thanks for the amazing work.
Feature Request
This issue is a request to add an option in the
daisyui
config to allow customize the class names with a prefix.Rationale
This stems from my most recent project where I came across this issue: the words used for naming components in
daisy
are widely used. This results in two problems:If
daisy
has to coexist with another styling system (in our case, we were in the process of migrating bootstrap to tailwind), there will be conflict.Due to the generous nature of Tailwind's default extractor, if someone is working in a React
.jsx
file and has the wordmodal
in some comment like the following, for example:Tailwind will include the
.modal
class in the output. This results in unused css and unoptimized build. Having a prefix for all components and their associated utilities will help with this.Proposed Implementation
Please look at the pull request linked to this issue for details. There're two parts to this.
The Config Option
We can use postcss-js with the postcss-class-prefix plugin to add prefix on demand in user's
tailwind.config.js
:Documentation Site Improvement
In the pull request, I also added instruction about this new
option
in the config page. But more importantly, I feel like the prefix should be a user-changeable global variable (similar to the theme dropdown) that is actually reflected in the class table and the html code examples.The change to html codeblocks to support dynamic prefix requires further discussion. Right now my implementation includes a custom svelte action that replaces
$$
with theprefix
value coming out of a global store. This requires the following change to everypre
block that wants to support this:As this requires a large refactor for all endpoints in the
components
path, I'm waiting for your discussion and confirmation before including them all in the PR. Right now only thebutton
endpoint is done.This solution requires work now (which I am happy to do) but will require low maintenance later. I was thinking about having a dictionary for all the classes from
daisy
and do a one-place-search-and-replace-all type of wrapper/component/action but this comes with a runtime penalty for performance.How well is this tested?
The first thing I tested was the intellisense of VSCode Tailwind, which works well
So far I have not encountered any breaking change. But please let me know if you think otherwise or found any problem.
Potential Issues & Further Discussion
postcss-js has released 4.0.0 version but it requires postcss 8.3. Unfortunately
postcss-clean
does not support newer version of postcss (yet?) and will break build step. Eventually I went with 3.0.3 forpostcss-js
I think at some point we should switch to cssnano to keep up to date with the postcss ecosystem. Just my opinion that is open for discussion.
[Enhancement] Modal close animation
Modals have an animation for opening, but closing just happens instantly with no animation. It would be nice to have a closing animation, potentially just the opening animation in reverse.
This also occurs on the docs so I know it is not an issue with my code.
Additional components and improvements for completeness
Hey @saadeghi , Daisy UI is becoming really powerful set UI components.
We though that adding few more components and improvements on the existing ones, would make Daisy UI even more complete E.g.
tooltip
- we can pretty much achieve this with an absolute positioneddropdown
that opens up on mouse hover opening a panel/card etc, however not sure if it makes sense to factor it out as a separate component that can be used in combination with other components likebutton
,form-toggle
,menu
etc. here is an exampletreeview
- very similar toaccordion
with the difference that it can go in depth of multiple levels here is an exampletimeline
- this is more advanced and composite control that would have slots for its timeline items and their icons/images/avatars. here is an examplebadge
(floating or overlapping) - we already thebadge
component which great as it is. Here the idea is more to provide an example of how to place the badge in one if the upper/lower angles of e.g. abutton
oravatar
similar to this example e.g. indicating user online/offline status. Probably this can be achieved by using margins on bottom or top e.g.mb-x
. However, the idea is to show these in the examples of Daisy UI.dropdown
programmatic open/close - Currentdropdown
is really powerful option to display complex menu items. However, since, unlikeaccordion
its status (open/closed) is not mapped to anyinput
element, we haven't found a way to programmatically open or close adropdown
. Especially this is an issue if thedropdown
opens up on mouse hover and inside thedropdown menu
there is aform
component e.g.form-toggle
. In that case, if the user clicks on theform-toggle
and leaves with the mouse the menu area, the menu still remains open. So in such case it would make sense to have an option to programmatically close it. Maybe, there is a way around this, that we are not aware of...Not sure how feasible is to implement these components and improvements as CSS-only-components (without JS logic), but definitively these would make Daisy UI more complete.
Thanks for the already existing set of great UI components.
checkbox check renders strangely
I'm using firefox 96.0 on ubuntu 20.04
When i take a screenshot of the documentation of the checkbox https://daisyui.com/components/form/checkbox/ at 100% page zoom. The checkbox check doesn't look so good (see below left side). I also zoomed in with my photo editor to make the problem more clear (see further down). I think the checkbox should look like the one i manually adjusted on the right side.
Failed to Compile Syntax Error - 1.16.2 and Tailwind 3
Hey All,
I get this error when I run
npm run build
I followed this tailwind guide to create a fresh react project,
if I remove
require("daisyui")
fromtailwind.config.js
then running npm run build, the project builds just fine but breaks when I add daisyui in the plugins sectionMy package.json
bug: DaisyUI does not work with Next.js
Hello, I would like to use DaisyUI to my nextjs pwa but I have an issue using the library. In storybook works as expected but in next.js I see this log all the time and my PWA does not load
It's a monorepo and I have created a shared package that I use daisyUI there with react components that I import to my PWA
I attach the config files
next.config.js
tailwind.config.js
Drawer only takes up header space
In my header, I have a hamburger menu that makes use of the drawer. Unfortunately, the drawer only takes up the small space that the header has at the top, rendering it quiet useless. How can I make it take up the entire screen?
Scroll history broken on drawer
Hi.
Apparently drawer-content which has max-height: 100vh breaks scroll history when user navigates back. I've used docs an all content(nav, content and footer) were placed into drawer-content by hierarchy provided in the docs.
I mainly use it for a mobile, so it's only relevant to make 100vh max when opened. Not sure if that's the bug or something I'm doing wrong, altho I've came up with a temporary fix by adding some scss:
So now max-height is only set when drawer is opened(in my case it's only for mobile so it's what's needed).
Anyone faced same issues ?
Just in case, hierarchy pseudo-example I use:
Request for a toggle button or allow images for Checkbox
Hi,
I think DaisyUI is a great project.
Could I please put in an enhancement for a Toggle Button (2 state - on/off) which supports an On state text label or image and an Off state text label or image?
A Toggle Button Group would also be very useful.
Alternatively allow the Checkbox On and Off states to support custom SVG's or images.
Many thanks,
Shaun
Build components from another directory
Hello dear Pouya. I have a problem with building config, my main project is in '/folderOne' and i've got some core components in another folder ('/core'). I've used some daisyUI components in core, in dev server it's rendered as it should, but when i build, daisyUI don't recognize that components and styles are not added!. Is there any way you can think of to solve this problem? Thanks in advanced, you've done a great job, really appreciate daisy.
Remains height when dropdown is hidden
hi,maintainer! I am using
.dropdown
with a small modal, but when I hide it, the height of the element remains and so does the scrollbar. The CSS defining the dropdown isvisibility:hidden
, so can I submit a pull request with an additional definition ofdisplay:none
(&block
)?Feature Request: Simpler Inputs
I think inputs can be simplified. What takes this amount of code:
Can really be condensed to
label
does not need a class.label
. Default style can be applied to thelabel
element.span
withinlabel
. Any formatting can be done through the class attribute oflabel
.<label for="input1" class="label-pos-{pos}">What is your name?</label>
, where{pos}
would betl | tr | bl | br
.input
does not need a class.input
. Default style can be applied to theinput
element with the help of thetype=
attribute..input-bordered.input-primary
you could just apply.input-primary
and it still works. Maybe just remove the superflous.input-bordered
?Last but not least, maybe even the
.form-control
could be removed and labels and groups would be grouped together via thefor=
attribute. If something like that would even be possible.open/close tooltip controller
This PR is very useful to help with form validation. It allows having a condition of not opening it if the value of data-tip is false. Please see this example I created to demonstrate its use.
https://svelte.dev/repl/79a08e408d9e464aad574b46fa9e1feb?version=3.55.0
Modal | any option to render it deeply inside but have it a global modal?
For the most common use cases, modals should appear in the center of the screen and darken out the entire background. Currently, daisyui has modals open within the scope of the parent container.
Is there some option to make it global so to speak? Or would I have to send state back up the tree and then render it way at the top of the tree?
Thank you?
Feature request: Collapsible/Expandable table
Actual Collapse element cannot be used in combination with table ๐
Exemples: https://mui.com/material-ui/react-table/#collapsible-table https://codepen.io/pc3b3r/pen/vLxONL?editors=1010
Range thinner and sleeker config || add Moz Thumb to Progress
This would be an enhancement to the DaisyUI range or progress bar - allowing the range to be thinner where a configurable moz range thumb does not look weird, also maybe configurable moz range thumb color. Below is a screenshot, at the top is a custom range, and below are the daisyui range.
Yes, this can be custom made, but I imagine this would be reused by many DaisyUI folks as this is very common in music players. Right now, the range seems fat and large to what is actually needed for tracking location in a track. Where something more minimal could be used. When you adjust the height on the DaisyUI range also, it starts to look weird like Pong.
An alternative could be just adding a moz range thumb to the current DaisyUI Progress, and could emulate this common look in music players.