daisyUI components built with React, Typescript and TailwindCSS

[ See all components ]

📖 Check out our Storybook | 🎲 Try it with CodeSandbox

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

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')],
}

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

module.exports = nextConfig

npm install next-transpile-modules

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

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

Import react-daisyui components within your component files:

import { Button } from 'react-daisyui'

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

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.

We're looking for contributors to help write stories and unit tests for 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.

Check out the official daisyUI examples. 👈

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