react-daisyui
v5.0.5TypeScript
react-daisyui - DaisyUI components built with React š¼
0/weekUpdated 1 years agoMITUnpacked: 1.8 MB
Published by daisyui
npm install react-daisyui
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:
``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')],
}
For Next.js 13 - 14:
Modify transpilePackages in your next.config.js file:
`js
const nextConfig = {
// ... your content here
transpilePackages: ['react-daisyui'],
reactStrictMode: true,
}
module.exports = nextConfig
`
For Next.js 12:
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,
})
ā” Quick Start
Import react-daisyui components within your component files:
`js
import { Button } from 'react-daisyui'
export default (props) => {
return
}
`
šØ 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 (
<>
)
}
`
Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.
---
āļø Components
Navigation:
- [x] Bottom Navigation
- [x] Breadcrumbs
- [x] Link
- [x] Menu
- [x] Navbar
- [x] Pagination
- [x] Steps
- [x] Tabs
Data Input:
- [x] Checkbox
- [x] FileInput
- [x] Input
- [x] Radio
- [x] Range
- [x] Rating
- [x] Select
- [x] Textarea
- [x] Toggle
Layout:
- [x] Artboard
- [x] Button Group (Deprecated)
- [x] Divider
- [x] Drawer
- [x] Footer
- [x] Hero
- [x] Indicator
- [x] Input Group (Deprecated)
- [x] Join (group items)
- [x] Mask
- [x] Stack
Mockup:
- [x] Browser
- [x] Code
- [x] Phone
- [x] Window
---
š¤ Contributing
We're looking for contributors to help write stories and unit tests for components.
$3
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.
$3
Check out the official daisyUI examples. š
---
$3
This project is licensed under the MIT License - see the LICENSE.md file for details.