React-daisyui 🌼 DaisyUI components built with React, Typescript and TailwindCSS

Last update: Jun 17, 2022

NPM Version npm bundle size npm License Discord Invite

react-daisyui 🌼

DaisyUI components built with React, Typescript and TailwindCSS.

📖 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:

npm install react-daisyui

To prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:

module.exports = {
  content: [],
  safelist: [
    {
      pattern: /./
    },
  ],
  ...
  plugins: [require("daisyui")],
}

Quick Start

Import react-daisyui components within your component files:

Click me! }">
import { Button } from 'react-daisyui'

export default (props) => {
  return <Button color="primary">Click me!</Button>
}

🎨 Themes

To apply a theme (or multiple themes) to a page or components, import the Theme component and wrap your content:

) }">
import { Theme, Button } from 'react-daisyui'

export default (props) => {
  return (
    <>
      <Theme dataTheme="dark">
        <Button color="primary">Click me, dark!</Button>
      </Theme>

      <Theme dataTheme="light">
        <Button color="primary">Click me, light!</Button>
      </Theme>
    </>
  )
}

Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.


⚙️ Components

Actions:
Data Display:
Data Input:
Layout:
Navigation:
Mockup:

🤝 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 file for details.

GitHub

https://github.com/daisyui/react-daisyui
Comments
  • 1. Not able to generate new component

    Getting exception while running npm run generate component Square

    Output:

    npm run generate component Square 
    
    > [email protected] generate
    > plop "component" "Square"
    
    /Users/****/Desktop/Temp/react-daisyui/node_modules/plop/bin/plop.js:3
    import { Plop, run } from "../src/plop.js";
    ^^^^^^
    
    SyntaxError: Cannot use import statement outside a module
        at Module._compile (internal/modules/cjs/loader.js:892:18)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
        at internal/main/run_main_module.js:17:11
    

    Expected: create new component

    Reviewed by bannarisoftwares at 2022-04-26 16:45
  • 2. Classes of react components not being added to styles.css

    Hi,

    Thanks for this project, is really cool, i have a problem with the nextjs integration, i've noticed the classes of the react components are not being scaned, becuase they're not being added to the global styles.css tailwind file, not static not jit, it seems that its because the component library is not being scanned for the new tailwind classes they need, ¿ any ideas ?

    Thanks, Hans

    Reviewed by hanspoo at 2022-04-21 13:04
  • 3. chore: release 2.0.1

    Reviewed by github-actions[bot] at 2022-04-25 19:00
  • 4. Did you mean to import react/jsx-runtime.js?

    I have installed the package on a nextjs application (with nx). I succeed to render a button just like in the quickstart of the readme.

    But 2 seconds later, I have an error popping:

    Server Error
    Error: Cannot find module '/Users/user/Desktop/folder/node_modules/react/jsx-runtime' imported from /Users/user/Desktop/folder/node_modules/react-daisyui/dist/react-daisyui.modern.js
    Did you mean to import react/jsx-runtime.js?
    
    "daisyui": "^2.11.0",
    "react-daisyui": "^1.7.1"
    
    Reviewed by balibou at 2022-03-21 16:04
  • 5. chore(main): release 2.0.4

    Reviewed by github-actions[bot] at 2022-06-21 15:58
  • 6. chore(main): release 2.0.3

    :robot: I have created a release beep boop

    2.0.3 (2022-06-10)

    Bug Fixes

    • Dropdown: Enable forwarding refs to DropdownItem (#117) (6f0e6d9)

    Miscellaneous

    • Table: first column fixed position when table overflows horizontally (#114) (8a75404)

    This PR was generated with Release Please. See documentation.

    Reviewed by github-actions[bot] at 2022-05-17 22:36
  • 7. chore(main): release 2.0.2

    Reviewed by github-actions[bot] at 2022-05-17 15:52
  • 8. Update Input.tsx

    This change addresses the feature requested in #101 where the IDE presents a type attribute for Input, however whenever an Input is rendered, its type attribute will always be text.

    Further recommendations would be to implement a custom type where a limited selection of "types" may be selected for input i.e.

    type: 'date' | 'email' | 'file' | 'image' | 'month' | 'pattern' | 'password' |  'number' | 'tel' | 'text
    

    The point being her would be to remove types like checkbox and button from the list of selectable "inputs" since they're already covered by other components.

    Reviewed by mikeyGlitz at 2022-04-24 22:48
  • 9. chore: release 2.0.0

    :robot: I have created a release *beep* *boop*

    2.0.0 (2022-04-18)

    ⚠ BREAKING CHANGES

    • Carousel: refactored fullWidth prop to width type
    • Modal: removed all props in favor of passing in subcomponents

    Miscellaneous

    • added margins to storys to prevent overflow from preview container (#88) (ac11a6d)
    • Carousel: customizable button renderprops and added stories (#90) (506cbe5)
    • Checkbox: added indeterminate state (#93) (6added7)
    • Countdown: added stories (0d06591)
    • Modal: refactored modal for better customization (#85) (a24406c)
    • Progress: added stories (#94) (81fc70e)
    • Radial Progress: added size and thickness props and stories (#92) (7928e56)
    • ran prettier (#95) (f46ac7d)
    • restyled preview to match daisyui and provide source code (#87) (6a69ef4)
    • Table: added footer and stories (#91) (822eea9)
    • Theme: added theme context stories (#96) (52fdbd7)
    • Tooltip: added stories (#89) (edad1ca)
    • updated daisyui to v 2.14.0 (f5f385a)

    This PR was generated with Release Please. See documentation.

    Reviewed by github-actions[bot] at 2022-04-14 17:35
  • 10. chore: release 1.7.6

    Reviewed by github-actions[bot] at 2022-04-06 15:12
  • 11. chore: release 1.7.6

    Reviewed by github-actions[bot] at 2022-04-06 14:54
  • 12. chore(main): release 2.0.5

    Reviewed by github-actions[bot] at 2022-06-24 14:08
  • 13. Prevent `stories.d.ts` files from appearing in built package

    Possible solutions would be to move all component Storybook files to a separate folder and ignore it, or perhaps use pattern matching to exclude .stories.tsx files from the build.

    Reviewed by benjitrosch at 2022-06-21 17:49
  • 14. pnpm: ERR_MODULE_NOT_FOUND react/jsx-runtime

    I use pnpm to solve some npm dependencies bugs but now I cannot import react-daisyui.

    Error

    ➜  my-project-name git:(dark-mode) ✗ npm run dev
    
    > [email protected] dev
    > next dev
    
    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    info  - Loaded env from /home/indicozy/Documents/Projects/oponai/my-project-name/.env
    node:internal/process/promises:279
                triggerUncaughtException(err, true /* fromPromise */);
                ^
    
    Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/[email protected]_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react/jsx-runtime' imported from /home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/[email protected]_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react-daisyui/dist/react-daisyui.modern.js
    Did you mean to import [email protected]/node_modules/react/jsx-runtime.js?
        at new NodeError (node:internal/errors:372:5)
        at finalizeResolution (node:internal/modules/esm/resolve:437:11)
        at moduleResolve (node:internal/modules/esm/resolve:1009:10)
        at defaultResolve (node:internal/modules/esm/resolve:1218:11)
        at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
        at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
        at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
        at link (node:internal/modules/esm/module_job:78:36) {
      code: 'ERR_MODULE_NOT_FOUND'
    }
    

    Stack: NextJS v12.1.6, React v17.0.2, daisyui v2.15.3, react-daisyui v2.0.3

    Reviewed by indicozy at 2022-06-13 21:27
  • 15. Using safelist /./ is too slow

    Tailwind is too slow with such a safelist pattern (advised on README.md), if I remove it I go from 2s compilation time to 300ms, and I have a 12 core processor (although I'm not sure if this is multi-threaded).

    Any idea why this happens, and if we should simply add an exhaustive whitelist for daisy ?

    Reviewed by Igosuki at 2022-06-07 08:28
Opinionated React UI library, built with styled-components and TypeScript.
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

May 17, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Dec 18, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Feb 28, 2022
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Jun 12, 2022
Storybook environment for React components production boosted with TypeScript & styled by Material-UI with styledComponents as final makeup 😁

Material-UI Storybook Components for React React.js components made with TypeScript with on Material-UI look-like using Storybook. The problem @Materi

Jan 21, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Jun 26, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Jun 2, 2022
Nextjs-components - A collection of React components
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

Jun 16, 2022
A React Higher Order Component library to assign class names to components, looks like styled-components

Claas A React Higher Order Component library to assign classNames to components, looks like styled-components Why I always liked to use Tailwind and w

Mar 25, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

Jun 26, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Jun 16, 2022
VechaiUI – React components with built-in dark mode using Tailwind CSS
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

Jun 19, 2022
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Jun 14, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Jun 19, 2022
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Nov 10, 2021
TheCodingMachine React Native boilerplate - Typescript Plugin
 TheCodingMachine React Native boilerplate - Typescript Plugin

This plugin allow thecodingmachine react-native-boilerplate ?? users to translate the boilerplate from Javascript ?? to Typescript ??

May 25, 2022
Implementation of Comonad UIs in React/Typescript

Comonadic React An exploration of Arthur Xavier's Comonads for UIs using fp-ts and React. ✨ Bootstrapped with Create Snowpack App (CSA). Available Scr

Mar 27, 2022
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Jun 23, 2022
React components and demo for the Tabler UI theme.

Update - June 2019: Version 2 Alpha now available on NPM: npm install [email protected] yarn add [email protected] Check out the latest progress and

Jun 24, 2022