Git Product home page Git Product logo

react-daisyui's Introduction

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 13 - 14:

Modify transpilePackages in your next.config.js file:

const nextConfig = {
  // ... your content here
  transpilePackages: ['react-daisyui'],
  reactStrictMode: true,
}

module.exports = nextConfig
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:
Navigation:
Feedback:
Data Input:
Layout:
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.

react-daisyui's People

Contributors

benjitrosch avatar github-actions[bot] avatar christianblandford avatar yoshi6jp avatar jack-2077 avatar klaas058 avatar redxzeta avatar dev0t avatar yurisldk avatar phwebi avatar wjdwl002 avatar neotan avatar sahinvardar avatar oxcened avatar xaamin avatar bparvatkar avatar bohdanbirdie avatar hribb avatar chargome avatar erichartline avatar giacomorebonato avatar henrique-gouvea avatar itaiperi avatar khanhhaquang avatar kermitjosephlee avatar kodjunkie avatar mattiaz9 avatar maurodaprotis avatar mikeyglitz avatar muametgrooby avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.