Dculus react-dculus-daisyui 🌼

DaisyUI components built with React, Typescript and TailwindCSS.

📖 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:

1npm install react-dculus-daisyui

To prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:

1module.exports = {
2  content: [],
3  safelist: [
4    {
5      pattern: /./
6    },
7  ],
8  ...
9  plugins: [require("daisyui")],
10}

⚡ Quick Start

Import react-dculus-daisyui components within your component files:

1import { Button } from 'react-dculus-daisyui'
2
3export default (props) => {
4  return <Button color="primary">Click me!</Button>
5}

🎨 Themes

To apply a theme (or multiple themes) to a page or components, import the Theme component and wrap your content:

1import { Theme, Button } from 'react-dculus-daisyui'
2
3export default (props) => {
4  return (
5    <>
6      <Theme dataTheme="dark">
7        <Button color="primary">Click me, dark!</Button>
8      </Theme>
9
10      <Theme dataTheme="light">
11        <Button color="primary">Click me, light!</Button>
12      </Theme>
13    </>
14  )
15}

Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.

---

⚙️ Components

Actions:

• Button
• Dropdown
• Modal
• Swap

Data Display:

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

Data Input:

• Checkbox
• 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
• Tabs

Mockup:

• Code
• Phone
• Window

---

🤝 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.