daisyUI components built with React, Typescript and TailwindCSS

[ See all components ]

react-daisyui 🌼

📖 Check out our Storybook | 🎲 Try it with CodeSandbox

🙋 Need help or have a suggestion? Join our discord!

💿 Install

Make sure you've installed TailwindCSS and daisyUI.

Install the package with npm or yarn:

npm install react-daisyui
or
yarn add react-daisyui

To prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:

module.exports = {
  content: [
    'node_modules/daisyui/dist/**/*.js',
    'node_modules/react-daisyui/dist/**/*.js',
  ],
  plugins: [require('daisyui')],
}

Modify transpilePackages in your next.config.js file:

const nextConfig = {
  // ... your content here
  transpilePackages: ['react-daisyui'],
  reactStrictMode: true,
}

module.exports = nextConfig

npm install next-transpile-modules

And import the package inside your next.config.js file:

const withTM = require('next-transpile-modules')(['react-daisyui'])

Finally, you can wrap your module.exports using withTM like so:

module.exports = withTM({
  //... your content here
  reactStrictMode: true,
})

⚡ Quick Start

Import react-daisyui components within your component files:

import { Button } from 'react-daisyui'

export default (props) => {
  return <Button color="primary">Click me!</Button>
}

🎨 Themes

To apply a theme (or multiple themes) to a page or components, import the Theme component and wrap your content:

import { Theme, Button } from 'react-daisyui'

export default (props) => {
  return (
    <>
      <Theme dataTheme="dark">
        <Button color="primary">Click me, dark!</Button>
      </Theme>

      <Theme dataTheme="light">
        <Button color="primary">Click me, light!</Button>
      </Theme>
    </>
  )
}

Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.

⚙️ Components

• [x] Button
• [X] Dropdown
• [X] Modal
• [X] Swap
• [ ] Theme Controller

• [x] Accordion
• [X] Avatar
• [X] Badge
• [X] Card
• [X] Carousel
• [X] Chart Bubble
• [X] Collapse
• [X] Countdown
• [X] Diff
• [X] Kbd
• [X] Stats
• [X] Table
• [X] Timeline

• [x] Bottom Navigation
• [x] Breadcrumbs
• [x] Link
• [x] Menu
• [x] Navbar
• [x] Pagination
• [x] Steps
• [x] Tabs

• [x] Alert
• [X] Loading
• [X] Progress
• [X] Radial Progress
• [ ] Skeleton
• [x] Toast
• [X] Tooltip

• [x] Checkbox
• [x] FileInput
• [x] Input
• [x] Radio
• [x] Range
• [x] Rating
• [x] Select
• [x] Textarea
• [x] Toggle

• [x] Artboard
• [x] Button Group (Deprecated)
• [x] Divider
• [x] Drawer
• [x] Footer
• [x] Hero
• [x] Indicator
• [x] Input Group (Deprecated)
• [x] Join (group items)
• [x] Mask
• [x] Stack

• [x] Browser
• [x] Code
• [x] Phone
• [x] Window

🤝 Contributing

We're looking for contributors to help write stories and unit tests for components.

Creating new components

Run npm run generate component ${your_new_component_name}. The generator will ask a few questions and setup the component for you.

When you'e done, export the component from index.tsx and open a PR.

Creating new stories

Check out the official daisyUI examples. 👈

License

This project is licensed under the MIT License - see the LICENSE.md file for details.