react-daisyui v5.0.0
daisyUI components built with React, Typescript and TailwindCSS
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
- Bottom Navigation
- Breadcrumbs
- Link
- Menu
- Navbar
- Pagination
- Steps
- Tabs
- Checkbox
- FileInput
- Input
- Radio
- Range
- Rating
- Select
- Textarea
- Toggle
- Artboard
- Button Group (Deprecated)
- Divider
- Drawer
- Footer
- Hero
- Indicator
- Input Group (Deprecated)
- Join (group items)
- Mask
- Stack
- Browser
- Code
- Phone
- 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.
5 months ago
7 months ago
8 months ago
9 months ago
10 months ago
11 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago