React-dculus-daisyui NPM

npm

Dculus react-dculus-daisyui 🌼

DaisyUI components built with React, Typescript and TailwindCSS.

📖 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-dculus-daisyui

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

module.exports = {
  content: [],
  safelist: [
    {
      pattern: /./
    },
  ],
  ...
  plugins: [require("daisyui")],
}

⚡ Quick Start

Import react-dculus-daisyui components within your component files:

import { Button } from 'react-dculus-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-dculus-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.