react-daisy

react-daisy 🌼

DaisyUI components built with React, Typescript and TailwindCSS.

Check out our Storybook!

---

Quick Start

Install the package with npm or yarn:

npm install react-daisy

Then import react-daisy components within your component files:

import { Button } from 'react-daisy'

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

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-daisy'

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

---

Components To-Do

Actions:

• Button
• Dropdown
• Modal
• Swap

Data Display:

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

Data Input:

• Checkbox
• Input
• Radio
• Range
• 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

Contributions

We could use some help building out stories and writing unit tests for components.

---

License

This project is licensed under the MIT License - see the LICENSE.md file for details.