react-daisyui

react-daisyui

🚧 WORK IN PROGRESS 🚧

A React.js wrapper for daisyUI

Storybook

Help wanted

🚨 We are looking for contributors to this project! If you have packaging skills, react skills, or Github skills, we would love to work with you! 🚨

Installing

First install tailwindcss

Then install and configure daisyUI

Install this package:

yarn add react-daisyui or npm add react-daisyui

Finally (and most importantly), add this package to your content/purge array in your tailwind.config.js. This library WILL NOT WORK properly without doing this.

Example:

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './node_modules/react-daisyui/dist/*.js'
  ],
  // ...
}

Usage

 import {Button} from 'react-daisyui'

 ...

 export const YourComponent = () => {
     return (
         <Button variant="success">Click me!</Button>
     )
 }

Documentation and list of components is available in the Storybook.

Components

• Actions

  • Button
  • Dropdown
  • Modal
  • Swap

• Data display

  • Alert
  • Avatar
  • Badge
  • Card
  • Carousel
  • Collapse
  • Countdown
  • Kbd
  • Progress
  • Radial progress
  • Stat
  • Table
  • Tooltip

• Data input

  • Checkbox
  • Text input
  • Radio
  • Range
  • Rating
  • Select
  • Textarea
  • Toggle

• Layout

  • Artboard
  • Button group
  • Divider
  • Drawer
  • Footer
  • Hero
  • Indicator
  • Input group
  • Mask
  • Stack

• Navigation

  • Breadcrumbs
  • Link
  • Menu
  • Navbar
  • Pagination
  • Steps
  • Tab

• Mockup

  • Code
  • Phone
  • Window

Contributing

Configuring dev environment

First, clone this repo.

Then run yarn to install all of the dependencies:

yarn

Now you can launch the storybook dev server by running:

yarn storybook

Your browser will automatically open to Storybook.

Creating new components

Run yarn generate component ${your_new_component_name}.

The generator will ask a few questions and generate the component for you.

Ensure you export the component, at the right levels, or it will not be available to dependent packages.

Create a new release

yarn release