{"id":14962140,"url":"https://github.com/daisyui/react-daisyui","last_synced_at":"2025-05-14T18:02:57.870Z","repository":{"id":37014343,"uuid":"437355109","full_name":"daisyui/react-daisyui","owner":"daisyui","description":"daisyUI components built with React 🌼","archived":false,"fork":false,"pushed_at":"2025-04-16T20:28:01.000Z","size":28764,"stargazers_count":1009,"open_issues_count":22,"forks_count":111,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-17T01:41:36.744Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"http://react.daisyui.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daisyui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-11T18:09:31.000Z","updated_at":"2025-04-16T20:26:32.000Z","dependencies_parsed_at":"2023-02-10T20:01:25.656Z","dependency_job_id":"9644823a-0ed0-4b6d-a4ad-f53dd4be5453","html_url":"https://github.com/daisyui/react-daisyui","commit_stats":{"total_commits":469,"total_committers":43,"mean_commits":"10.906976744186046","dds":0.6076759061833689,"last_synced_commit":"08b1801733bc25d66be397d76d9bc7aa570bbfbe"},"previous_names":["benjitrosch/react-daisy"],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daisyui%2Freact-daisyui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daisyui%2Freact-daisyui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daisyui%2Freact-daisyui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daisyui%2Freact-daisyui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daisyui","download_url":"https://codeload.github.com/daisyui/react-daisyui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198452,"owners_count":22030964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T13:29:31.550Z","updated_at":"2025-05-14T18:02:57.736Z","avatar_url":"https://github.com/daisyui.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/64439681/181564610-a0fd8fef-b552-4cc5-b115-8652dc142065.svg\"\u003e\n\n**daisyUI components built with React, Typescript and TailwindCSS**\n\n[ [See all components](https://react.daisyui.com/) ]\n\n\u003c/div\u003e\n\n![card-3](https://user-images.githubusercontent.com/64439681/181566540-b1e37814-c72a-48af-bbe2-80367b000770.png)\n\n# react-daisyui 🌼\n\n[![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\u0026label=chat\u0026logo=discord\u0026logoColor=white)](https://discord.gg/4v2eS3VQNv)\n\n📖 Check out our \u003ca href=\"https://react.daisyui.com/\"\u003eStorybook\u003c/a\u003e | 🎲 Try it with \u003ca href=\"https://codesandbox.io/s/react-daisyui-example-840os3?file=/src/App.tsx\"\u003eCodeSandbox\u003c/a\u003e\n\n🙋 Need help or have a suggestion? Join our [discord](https://discord.gg/4v2eS3VQNv)!\n\n---\n\n## 💿 Install\n\nMake sure you've installed \u003ca href=\"https://tailwindcss.com/docs/installation\"\u003eTailwindCSS\u003c/a\u003e and \u003ca href=\"https://daisyui.com/docs/install/\"\u003edaisyUI\u003c/a\u003e.\n\nInstall the package with npm or yarn:\n\n```bash\nnpm install react-daisyui\nor\nyarn add react-daisyui\n```\n\nTo prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:\n\n```js\nmodule.exports = {\n  content: [\n    'node_modules/daisyui/dist/**/*.js',\n    'node_modules/react-daisyui/dist/**/*.js',\n  ],\n  plugins: [require('daisyui')],\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eFor Next.js 13 - 14:\u003c/summary\u003e\n\nModify `transpilePackages` in your `next.config.js` file:\n\n```js\nconst nextConfig = {\n  // ... your content here\n  transpilePackages: ['react-daisyui'],\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFor Next.js 12:\u003c/summary\u003e\nInstall next-transpile modules:\n\n```bash\nnpm install next-transpile-modules\n```\n\nAnd import the package inside your `next.config.js` file:\n\n```js\nconst withTM = require('next-transpile-modules')(['react-daisyui'])\n```\n\nFinally, you can wrap your module.exports using withTM like so:\n\n```js\nmodule.exports = withTM({\n  //... your content here\n  reactStrictMode: true,\n})\n```\n\n\u003c/details\u003e\n\n## ⚡ Quick Start\n\nImport react-daisyui components within your component files:\n\n```js\nimport { Button } from 'react-daisyui'\n\nexport default (props) =\u003e {\n  return \u003cButton color=\"primary\"\u003eClick me!\u003c/Button\u003e\n}\n```\n\n## 🎨 Themes\n\nTo apply a theme (or multiple themes) to a page or components, import the Theme component and wrap your content:\n\n```js\nimport { Theme, Button } from 'react-daisyui'\n\nexport default (props) =\u003e {\n  return (\n    \u003c\u003e\n      \u003cTheme dataTheme=\"dark\"\u003e\n        \u003cButton color=\"primary\"\u003eClick me, dark!\u003c/Button\u003e\n      \u003c/Theme\u003e\n\n      \u003cTheme dataTheme=\"light\"\u003e\n        \u003cButton color=\"primary\"\u003eClick me, light!\u003c/Button\u003e\n      \u003c/Theme\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nUse tools like the official \u003ca href=\"https://daisyui.com/theme-generator/\"\u003edaisyUI Theme Generator\u003c/a\u003e or \u003ca href=\"https://themes.ionevolve.com/\"\u003edaisyUI Theme Builder\u003c/a\u003e to easily create your own themes.\n\n---\n\n## ⚙️ Components\n\n\u003cdetails\u003e\n\u003csummary\u003eActions:\u003c/summary\u003e\n  \n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/actions-button\"\u003eButton\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/actions-dropdown\"\u003eDropdown\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/actions-modal\"\u003eModal\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/actions-swap\"\u003eSwap\u003c/a\u003e\n- [ ] Theme Controller\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eData Display:\u003c/summary\u003e\n  \n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-accordion\"\u003eAccordion\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-avatar\"\u003eAvatar\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-badge\"\u003eBadge\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-card\"\u003eCard\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-carousel\"\u003eCarousel\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-chart-bubble\"\u003eChart Bubble\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-collapse\"\u003eCollapse\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-countdown\"\u003eCountdown\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-diff\"\u003eDiff\u003ca\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-kbd\"\u003eKbd\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-stats\"\u003eStats\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-table\"\u003eTable\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/data-display-timeline\"\u003eTimeline\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNavigation:\u003c/summary\u003e\n\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-bottomnavigation\"\u003eBottom Navigation\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-breadcrumbs\"\u003eBreadcrumbs\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-link\"\u003eLink\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-menu\"\u003eMenu\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-navbar\"\u003eNavbar\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-pagination\"\u003ePagination\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-steps\"\u003eSteps\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/navigation-tabs\"\u003eTabs\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFeedback:\u003c/summary\u003e\n  \n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-alert\"\u003eAlert\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-loading\"\u003eLoading\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-progress\"\u003eProgress\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-radial-progress\"\u003eRadial Progress\u003c/a\u003e\n- [ ] Skeleton\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-toast\"\u003eToast\u003c/a\u003e\n- [X] \u003ca href=\"https://react.daisyui.com/?path=/story/feedback-tooltip\"\u003eTooltip\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eData Input:\u003c/summary\u003e\n\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-checkbox\"\u003eCheckbox\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-fileinput\"\u003eFileInput\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-input\"\u003eInput\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-radio\"\u003eRadio\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-range\"\u003eRange\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-rating\"\u003eRating\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-select\"\u003eSelect\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-textarea\"\u003eTextarea\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/data-input-toggle\"\u003eToggle\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLayout:\u003c/summary\u003e\n\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-artboard\"\u003eArtboard\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-buttongroup\"\u003eButton Group (Deprecated)\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-divider\"\u003eDivider\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-drawer\"\u003eDrawer\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-footer\"\u003eFooter\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-hero\"\u003eHero\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-indicator\"\u003eIndicator\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-inputgroup\"\u003eInput Group (Deprecated)\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-join\"\u003eJoin (group items)\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-mask\"\u003eMask\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/layout-stack\"\u003eStack\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMockup:\u003c/summary\u003e\n\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/mockup-browser\"\u003eBrowser\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/mockup-code\"\u003eCode\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/mockup-phone\"\u003ePhone\u003c/a\u003e\n- [x] \u003ca href=\"https://react.daisyui.com/?path=/story/mockup-window\"\u003eWindow\u003c/a\u003e\n\u003c/details\u003e\n\n---\n\n## 🤝 Contributing\n\nWe're looking for contributors to help write stories and unit tests for components.\n\n### Creating new components\n\nRun `npm run generate component ${your_new_component_name}`. The generator will ask a few questions and setup the component for you.\n\nWhen you'e done, export the component from `index.tsx` and open a PR.\n\n### Creating new stories\n\nCheck out the official \u003ca href=\"https://daisyui.com/components/\"\u003edaisyUI examples.\u003c/a\u003e 👈\n\n---\n\n### License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/daisyui/react-daisyui/blob/main/LICENSE) file for details.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaisyui%2Freact-daisyui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaisyui%2Freact-daisyui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaisyui%2Freact-daisyui/lists"}