**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.