react-daisyui 🌼

📖 Check out our <a href="https://react.daisyui.com/">Storybook</a> | 🎲 Try it with <a href="https://codesandbox.io/s/react-daisyui-example-840os3?file=/src/App.tsx">CodeSandbox</a>

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

💿 Install

Make sure you've installed <a href="https://tailwindcss.com/docs/installation">TailwindCSS</a> and <a href="https://daisyui.com/docs/install/">daisyUI</a>.

Install the package with npm or yarn:

bash
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:

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:

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

module.exports = nextConfig

</details> <details> <summary>For Next.js 12:</summary> Install next-transpile modules:

bash
npm install next-transpile-modules

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

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

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

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

</details>

⚡ Quick Start

Import react-daisyui components within your component files:

js
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:

js
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 <a href="https://daisyui.com/theme-generator/">daisyUI Theme Generator</a> or <a href="https://themes.ionevolve.com/">daisyUI Theme Builder</a> to easily create your own themes.

⚙️ Components

<details> <summary>Actions:</summary>

<a href="https://react.daisyui.com/?path=/story/actions-button">Button</a>
<a href="https://react.daisyui.com/?path=/story/actions-dropdown">Dropdown</a>
<a href="https://react.daisyui.com/?path=/story/actions-modal">Modal</a>
<a href="https://react.daisyui.com/?path=/story/actions-swap">Swap</a>
Theme Controller

</details> <details> <summary>Data Display:</summary> </details> <details> <summary>Navigation:</summary>

<a href="https://react.daisyui.com/?path=/story/navigation-bottomnavigation">Bottom Navigation</a>
<a href="https://react.daisyui.com/?path=/story/navigation-breadcrumbs">Breadcrumbs</a>
<a href="https://react.daisyui.com/?path=/story/navigation-link">Link</a>
<a href="https://react.daisyui.com/?path=/story/navigation-menu">Menu</a>
<a href="https://react.daisyui.com/?path=/story/navigation-navbar">Navbar</a>
<a href="https://react.daisyui.com/?path=/story/navigation-pagination">Pagination</a>
<a href="https://react.daisyui.com/?path=/story/navigation-steps">Steps</a>
<a href="https://react.daisyui.com/?path=/story/navigation-tabs">Tabs</a>

</details> <details> <summary>Feedback:</summary>

<a href="https://react.daisyui.com/?path=/story/feedback-alert">Alert</a>
<a href="https://react.daisyui.com/?path=/story/feedback-loading">Loading</a>
<a href="https://react.daisyui.com/?path=/story/feedback-progress">Progress</a>
<a href="https://react.daisyui.com/?path=/story/feedback-radial-progress">Radial Progress</a>
Skeleton
<a href="https://react.daisyui.com/?path=/story/feedback-toast">Toast</a>
<a href="https://react.daisyui.com/?path=/story/feedback-tooltip">Tooltip</a>

</details> <details> <summary>Data Input:</summary>

<a href="https://react.daisyui.com/?path=/story/data-input-checkbox">Checkbox</a>
<a href="https://react.daisyui.com/?path=/story/data-input-fileinput">FileInput</a>
<a href="https://react.daisyui.com/?path=/story/data-input-input">Input</a>
<a href="https://react.daisyui.com/?path=/story/data-input-radio">Radio</a>
<a href="https://react.daisyui.com/?path=/story/data-input-range">Range</a>
<a href="https://react.daisyui.com/?path=/story/data-input-rating">Rating</a>
<a href="https://react.daisyui.com/?path=/story/data-input-select">Select</a>
<a href="https://react.daisyui.com/?path=/story/data-input-textarea">Textarea</a>
<a href="https://react.daisyui.com/?path=/story/data-input-toggle">Toggle</a>