Skip to content

Klaas058/react-daisyui

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

daisyUI components built with React, Typescript and TailwindCSS

[ See all components ]

card-3

react-daisyui ๐ŸŒผ

NPM Version npm bundle size npm License Discord Invite

๐Ÿ“– 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

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')],
}
For Next.js: Install next-transpile modules:
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

Actions:
Data Display:
Data Input:
Layout:
Navigation:
Mockup:

๐Ÿค 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.

About

daisyUI components built with React ๐ŸŒผ

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 93.8%
  • JavaScript 5.0%
  • Other 1.2%