sahinvardar / react-daisyui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from daisyui/react-daisyui

0.0 0.0 0.0 12.38 MB

daisyUI components built with React 🌼

Home Page: https://react.daisyui.com

License: MIT License

JavaScript 4.73% TypeScript 94.12% CSS 0.34% HTML 0.02% Handlebars 0.79%

react-daisyui's Introduction

daisyUI components built with React, Typescript and TailwindCSS

[ See all components ]

react-daisyui 🌼

📖 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>
    </>
  )
}