Tailwind CSS Components

  • By Pouya Saadeghi
  • Last update: Jan 9, 2023
  • Comments: 16

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

[ See all components ]

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 ]

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.

Hello!">
<a class="btn">Hello!a>
">
<input type="checkbox" class="checkbox"/>
">
<input type="checkbox" class="toggle"/>
Message sent successfully
">
<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
  • 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

Github

https://github.com/saadeghi/daisyui

Comments(16)

  • 1

    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:

    1. 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.

    2. Due to the generous nature of Tailwind's default extractor, if someone is working in a React .jsx file and has the word modal in some comment like the following, for example:

      function Component() {
        // this is meant to be my custom modal <-- modal is here and not in class attribute
        return (<div>...</div>);
      }
      

      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:

    const postcssJs = require('postcss-js');
    const postcssPrefix = require('postcss-class-prefix');
    
    //...
    
    const prefix = config('daisyui.prefix');
    if (prefix) {
      file = postcssJs.sync(postcssPrefix(prefix))(file);
    }
    

    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.

    docs-dynamic-prefix

    The change to html codeblocks to support dynamic prefix requires further discussion. Right now my implementation includes a custom svelte action that replaces $$ with the prefix value coming out of a global store. This requires the following change to every pre block that wants to support this:

    <pre slot="html" use:replace={{ to: $prefix }}>{
    `<button class="$$btn">Button</button>
    <button class="$$btn $$btn-primary">Button</button>
    <button class="$$btn $$btn-secondary">Button</button>
    <button class="$$btn $$btn-accent">Button</button>
    <button class="$$btn $$btn-ghost">Button</button>
    <button class="$$btn $$btn-link">Button</button>`
    }</pre>
    

    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 the button 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

    vscode-tailwind-intelisense

    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 for postcss-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.

  • 2

    [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.

  • 3

    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 positioned dropdown 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 like button, form-toggle, menu etc. here is an example
    • treeview - very similar to accordion with the difference that it can go in depth of multiple levels here is an example
    • timeline - this is more advanced and composite control that would have slots for its timeline items and their icons/images/avatars. here is an example
    • badge (floating or overlapping) - we already the badge 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. a button or avatar 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 - Current dropdown is really powerful option to display complex menu items. However, since, unlike accordion its status (open/closed) is not mapped to any input element, we haven't found a way to programmatically open or close a dropdown. Especially this is an issue if the dropdown opens up on mouse hover and inside the dropdown menu there is a form component e.g. form-toggle. In that case, if the user clicks on the form-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.

  • 4

    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.

    Screenshot from 2022-01-23 19-07-27

    Screenshot from 2022-01-23 19-15-09

  • 5

    Failed to Compile Syntax Error - 1.16.2 and Tailwind 3

    Hey All,

    I get this error when I run npm run build

    Creating an optimized production build...
    
    ๐ŸŒผ daisyUI components 1.16.2  https://github.com/saadeghi/daisyui
      โœ”๏ธŽ Including:  base, components, themes[22], utilities
      
    Failed to compile.
    
    Syntax error: postcss-custom-properties: <css input> Unknown word (1:1)
    > 1 | var(--b1)/var(--tw-bg-opacity,1)
        | ^
    

    I followed this tailwind guide to create a fresh react project,

    https://tailwindcss.com/docs/guides/create-react-app
    

    if I remove require("daisyui") from tailwind.config.js then running npm run build, the project builds just fine but breaks when I add daisyui in the plugins section

    My package.json

    {
      "name": "github-finder",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "daisyui": "^1.16.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0-next.58",
        "web-vitals": "^2.1.2"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "autoprefixer": "^10.4.0",
        "postcss": "^8.4.4",
        "tailwindcss": "^3.0.0"
      }
    }
    
    
  • 6

    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

    Screenshot 2021-10-02 at 1 11 37 PM

    I attach the config files

    next.config.js

    const withTM = require('next-transpile-modules')(['@forest-restoration/shared'])
    const withPWA = require('next-pwa')
    const withImages = require('next-images')
    const { i18n } = require('./next-i18next.config')
    
    const STUDIO_REWRITE = {
      source: '/studio/:path*',
      destination:
        process.env.NODE_ENV === 'development'
          ? 'http://localhost:3333/studio/:path*'
          : 'https://forestrestoration.sanity.studio/:path*',
    }
    
    module.exports = withPlugins(
      [
        withPWA({
          webpack: (config) => {
            config.resolve.fallback = {
              fs: false,
              module: false,
              path: false,
              os: false,
              stream: false,
            }
            return config
          },
          pwa: {
            dest: 'public',
            register: true,
            skipWaiting: true,
          },
        }),
        withImages,
        withTM(),
      ],
      {
        pageExtensions: ['page.js', 'page.tsx', 'page.ts'],
        reactStrictMode: true,
        images: {},
        i18n,
        redirects() {
          return [
            process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true'
              ? {
                  source:
                    '/((?!maintenance)(?!_next)(?!static|(?!image))(?!favicon-16x16.png)(?!favicon-32x32.png)(?!icon-192x192.png)(?!manifest.json)(?!themeToggle.js).*)',
                  destination: '/maintenance',
                  permanent: false,
                }
              : null,
          ].filter(Boolean)
        },
        rewrites: () => [STUDIO_REWRITE],
        images: {
          domains: ['cdn.sanity.io'],
        },
      }
    )
    

    tailwind.config.js

    module.exports = {
      mode: 'jit',
      purge: ['*.{js,ts,jsx,tsx}'],
    
      variants: {},
      plugins: [
        require('tailwindcss-filters'),
        require('@tailwindcss/typography'),
        require('tailwindcss-hyphens'),
        require('@tailwindcss/line-clamp'),
        require('tailwind-accent-color')(),
        require('daisyui'),
      ],
      daisyui: {
        themes: [
          {
            light: {
              primary: '#a991f7' /* Primary color */,
              'primary-focus': '#8462f4' /* Primary color - focused */,
              'primary-content': '#ffffff' /* Foreground content color to use on primary color */,
    
              secondary: '#f6d860' /* Secondary color */,
              'secondary-focus': '#f3cc30' /* Secondary color - focused */,
              'secondary-content': '#ffffff' /* Foreground content color to use on secondary color */,
    
              accent: '#37cdbe' /* Accent color */,
              'accent-focus': '#2aa79b' /* Accent color - focused */,
              'accent-content': '#ffffff' /* Foreground content color to use on accent color */,
    
              neutral: '#3d4451' /* Neutral color */,
              'neutral-focus': '#2a2e37' /* Neutral color - focused */,
              'neutral-content': '#ffffff' /* Foreground content color to use on neutral color */,
    
              'base-100': '#ffffff' /* Base color of page, used for blank backgrounds */,
              'base-200': '#f9fafb' /* Base color, a little darker */,
              'base-300': '#d1d5db' /* Base color, even more darker */,
              'base-content': '#1f2937' /* Foreground content color to use on base color */,
    
              info: '#2094f3' /* Info */,
              success: '#009485' /* Success */,
              warning: '#ff9900' /* Warning */,
              error: '#ff5724' /* Error */,
            },
            dark: {
              primary: '#f79191' /* Primary color */,
              'primary-focus': '#f46262' /* Primary color - focused */,
              'primary-content': '#ffffff' /* Foreground content color to use on primary color */,
    
              secondary: '#f6d860' /* Secondary color */,
              'secondary-focus': '#f3cc30' /* Secondary color - focused */,
              'secondary-content': '#ffffff' /* Foreground content color to use on secondary color */,
    
              accent: '#37cdbe' /* Accent color */,
              'accent-focus': '#2aa79b' /* Accent color - focused */,
              'accent-content': '#ffffff' /* Foreground content color to use on accent color */,
    
              neutral: '#3d4451' /* Neutral color */,
              'neutral-focus': '#2a2e37' /* Neutral color - focused */,
              'neutral-content': '#ffffff' /* Foreground content color to use on neutral color */,
    
              'base-100': '#ffffff' /* Base color of page, used for blank backgrounds */,
              'base-200': '#f9fafb' /* Base color, a little darker */,
              'base-300': '#d1d5db' /* Base color, even more darker */,
              'base-content': '#1f2937' /* Foreground content color to use on base color */,
    
              info: '#2094f3' /* Info */,
              success: '#009485' /* Success */,
              warning: '#ff9900' /* Warning */,
              error: '#ff5724' /* Error */,
            },
          },
        ],
      },
    }
    
  • 7

    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?

  • 8

    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:

    .drawer-toggle ~ .drawer-content {
      max-height: 100%;
    }
    
    .drawer.drawer-end .drawer-toggle:checked ~ .drawer-content {
      max-height: 100vh;
    }
    
    

    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:

    <div class='drawer'>
     <input id='drawer'/>
     <div class='drawer-content'>
       header
       <label for='drawer'/>
       content
       footer
     </div>
     <div class='drawer-side'>
       side menu
     </div>
    </div>
    
  • 9

    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

  • 10

    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.

  • 11

    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 is visibility:hidden, so can I submit a pull request with an additional definition of display:none (&block)?

  • 12

    Feature Request: Simpler Inputs

    I think inputs can be simplified. What takes this amount of code:

    <div class="form-control w-full max-w-xs">
      <label class="label">
        <span class="label-text">What is your name?</span>
        <span class="label-text-alt">Alt label</span>
      </label>
      <input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
      <label class="label">
        <span class="label-text-alt">Alt label</span>
        <span class="label-text-alt">Alt label</span>
      </label>
    </div>
    

    Can really be condensed to

    <div class="form-control">
      <label for="input1">What is your name?</label>
      <label for="input1">Alt Label</label>
      <input id="input1" type="text" placeholder="Type here" class="border border-sky-500" />
    </div>
    
    • A label does not need a class .label. Default style can be applied to the label element.
    • It is not necessary to nest span within label. Any formatting can be done through the class attribute of label.
    • The alternative labels could be identified by the nth-child selector. Where the first label would always be the primary and all others would be alternative labels.
    • The positioning of the label attribute could be managed with an additional class <label for="input1" class="label-pos-{pos}">What is your name?</label>, where {pos} would be tl | tr | bl | br.
    • An input does not need a class .input. Default style can be applied to the input element with the help of the type= attribute.
    • When you want to apply a border, instead of .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 the for= attribute. If something like that would even be possible.

  • 13

    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

  • 14

    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?

  • 15

    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

  • 16

    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.

    Screen Shot 2023-01-03 at 12 55 22 PM

    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.

    Screen Shot 2023-01-03 at 1 05 06 PM

    An alternative could be just adding a moz range thumb to the current DaisyUI Progress, and could emulate this common look in music players.