DaisyUI components built with React, Typescript and TailwindCSS.
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>
</>
)
}
Actions:
- [x] Button
- [X] Dropdown
- [X] Modal
- [X] Swap
Data Display:
- [x] Alert
- [X] Avatar
- [X] Badge
- [X] Card
- [X] Carousel
- [X] Collapse
- [X] Countdown
- [X] Kbd
- [X] Progress
- [ ] Radial Progress
- [ ] Stat
- [X] Table
- [X] Tooltip
Data Input:
- [X] Checkbox
- [X] Input
- [X] Radio
- [X] Range
- [X] Select
- [X] Textarea
- [X] Toggle
Layout:
- [X] Artboard
- [x] Button-Group
- [X] Divider
- [ ] Drawer
- [X] Footer
- [ ] Hero
- [X] Indicator
- [ ] Input Group
- [X] Mask
- [ ] Stack
Navigation:
- [X] Breadcrumbs
- [X] Link
- [X] Menu
- [X] Navbar
- [ ] Pagination
- [ ] Steps
- [X] Tab
Mockup:
- [ ] Code
- [ ] Phone
- [ ] Window
We could use some help building out stories and writing unit tests for components.
This project is licensed under the MIT License - see the LICENSE.md file for details.