Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daisyui/react-daisyui
daisyUI components built with React 🌼
https://github.com/daisyui/react-daisyui
component-library components css css-components css-framework daisyui design-systems library postcss react react-daisyui reactjs tailwind tailwind-css tailwindcss ui-design ui-framework ui-kit ui-library
Last synced: about 3 hours ago
JSON representation
daisyUI components built with React 🌼
- Host: GitHub
- URL: https://github.com/daisyui/react-daisyui
- Owner: daisyui
- License: mit
- Created: 2021-12-11T18:09:31.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T18:58:36.000Z (6 days ago)
- Last Synced: 2024-09-22T14:02:21.541Z (2 days ago)
- Topics: component-library, components, css, css-components, css-framework, daisyui, design-systems, library, postcss, react, react-daisyui, reactjs, tailwind, tailwind-css, tailwindcss, ui-design, ui-framework, ui-kit, ui-library
- Language: TypeScript
- Homepage: http://react.daisyui.com/
- Size: 29.4 MB
- Stars: 952
- Watchers: 7
- Forks: 103
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
**daisyUI components built with React, Typescript and TailwindCSS**
[ [See all components](https://react.daisyui.com/) ]
# react-daisyui 🌼
[](https://www.npmjs.com/package/react-daisyui) [](https://bundlephobia.com/result?p=react-daisyui) [](https://www.npmjs.com/package/react-daisyui) [](https://github.com/daisyui/react-daisyui/blob/master/LICENSE) [](https://discord.gg/4v2eS3VQNv)
📖 Check out our Storybook | 🎲 Try it with CodeSandbox
🙋 Need help or have a suggestion? Join our [discord](https://discord.gg/4v2eS3VQNv)!
---
## 💿 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 Click me!
}
```
## 🎨 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 (
<>
Click me, dark!
Click me, light!
>
)
}
```
Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.
---
## ⚙️ Components
Actions:
- [x] Button
- [X] Dropdown
- [X] Modal
- [X] Swap
- [ ] Theme Controller
Data Display:
- [x] Accordion
- [X] Avatar
- [X] Badge
- [X] Card
- [X] Carousel
- [X] Chart Bubble
- [X] Collapse
- [X] Countdown
- [X] Diff
- [X] Kbd
- [X] Stats
- [X] Table
- [X] Timeline
Navigation:
- [x] Bottom Navigation
- [x] Breadcrumbs
- [x] Link
- [x] Menu
- [x] Navbar
- [x] Pagination
- [x] Steps
- [x] Tabs
Feedback:
- [x] Alert
- [X] Loading
- [X] Progress
- [X] Radial Progress
- [ ] Skeleton
- [x] Toast
- [X] Tooltip
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.
### 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](https://github.com/daisyui/react-daisyui/blob/main/LICENSE) file for details.