# react-daisyui > react-daisyui - DaisyUI components built with React ๐ŸŒผ Latest version **5.0.5** (published 2024-09-18) ยท MIT license ยท 0 weekly downloads ## Install ```sh npm install react-daisyui pnpm add react-daisyui yarn add react-daisyui bun add react-daisyui ``` ## Health **Score 30/100 (F)** โ€” status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 5.0.5 | | Published | 2024-09-18 | | First published | 2022-03-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 1.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1092 | | Author | daisyui | | Maintainers | christianblandford, benjitrosch | ## Links - npm: https://www.npmjs.com/package/react-daisyui - Repository: https://github.com/daisyui/react-daisyui - Homepage: https://github.com/daisyui/react-daisyui#readme - Issues: https://github.com/daisyui/react-daisyui/issues - npm.io page: https://npm.io/package/react-daisyui ## Recent versions - 5.0.5 (latest) โ€” 2024-09-18 - 3.1.3-checkbox-server.0 (beta) โ€” 2023-04-15 - 5.0.4 โ€” 2024-08-30 - 5.0.3 โ€” 2024-07-26 - 5.0.2 โ€” 2024-07-26 - 5.0.0 โ€” 2023-12-02 - 4.1.2 โ€” 2023-10-05 - 4.1.1 โ€” 2023-09-15 - 4.1.0 โ€” 2023-08-22 - 4.0.4 โ€” 2023-08-04 - 4.0.3 โ€” 2023-08-01 - 4.0.2 โ€” 2023-07-31 - 4.0.1 โ€” 2023-07-28 - 4.0.0 โ€” 2023-06-27 - 3.1.3-server-components-test.1 โ€” 2023-04-15 - โ€ฆ 58 more at https://npm.io/package/react-daisyui/versions ## README
**daisyUI components built with React, Typescript and TailwindCSS** [ [See all components](https://react.daisyui.com/) ]
![card-3](https://user-images.githubusercontent.com/64439681/181566540-b1e37814-c72a-48af-bbe2-80367b000770.png) # react-daisyui ๐ŸŒผ [![NPM Version](https://img.shields.io/npm/v/react-daisyui.svg?branch=master)](https://www.npmjs.com/package/react-daisyui) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-daisyui)](https://bundlephobia.com/result?p=react-daisyui) [![npm](https://img.shields.io/npm/dt/react-daisyui?label=installs)](https://www.npmjs.com/package/react-daisyui) [![License](https://img.shields.io/npm/l/react-daisyui.svg)](https://github.com/daisyui/react-daisyui/blob/master/LICENSE) [![Discord Invite](https://img.shields.io/discord/951593480625459340?color=%237289DA&label=chat&logo=discord&logoColor=white)](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 } ``` ## ๐ŸŽจ 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
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. --- _Source: https://npm.io/package/react-daisyui ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._