Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-daisyui

Package Overview
Dependencies
Maintainers
2
Versions
73
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-daisyui

react-daisyui - DaisyUI components built with React 🌼

  • 3.1.1-preset-test.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.9K
increased by7.06%
Maintainers
2
Weekly downloads
 
Created
Source

daisyUI components built with React, Typescript and TailwindCSS

[ See all components ]

card-3

react-daisyui 🌼

NPM Version npm bundle size npm License Discord Invite

📖 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
or
yarn add react-daisyui

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

module.exports = {
  content: ['node_modules/daisyui/dist/**/*.js', 'node_modules/react-daisyui/dist/**/*.js'],
  plugins: [require('daisyui')],
}
For Next.js 12: Install next-transpile modules:
npm install next-transpile-modules

And import the package inside your next.config.js file:

const withTM = require('next-transpile-modules')(['react-daisyui'])

Finally, you can wrap your module.exports using withTM like so:

module.exports = withTM({
  //... your content here
  reactStrictMode: true,
})

⚡ Quick Start

Import react-daisyui components within your component files:

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.

FAQs

Package last updated on 04 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc