rsc-daisyui


- daisyUI components build with React, Typescript, TailwindCSS and TW CLASSED
- Simple components available in the React Server Component
- No useEffect, useState, etc and used.
- Support for daisyUI 5 and Tailwind CSS v4

Storybook

Next.js (Kitchen Sink)

rsc-daisyui

$3

Make sure you've installed TailwindCSS and daisyUI.
Install the package with npm or yarn or pnpm:

#### npm

``bash
npm install rsc-daisyui
`

#### yarn

`bash
yarn add rsc-daisyui
`

#### pnpm

`bash
pnpm add rsc-daisyui
`

$3

`app.css
@import "tailwindcss";
@plugin "daisyui";
@source "../../node_modules/rsc-daisyui/dist";
`

$3

Import rsc-daisyui components within your component files:

`js
import { Button } from "rsc-daisyui";

export default (props) => {
return Click me!;
};
``

$3

#### Actions

| Name | v1 | v2 |
| ---------------- | --- | --- |
| Button | ✅ | ✅ |
| Dropdown | ✅ | ✅ |
| FAB / Speed Dial | - | ✅ |
| Modal | ✅ | ✅ |
| Swap | ✅ | ✅ |
| Theme Controller | ✅ | ✅ |

#### Data display

| Name | v1 | v2 |
| ------------- | --- | --- |
| Accordion | ✅ | ✅ |
| Avatar | ✅ | ✅ |
| Badge | ✅ | ✅ |
| Card | ✅ | ✅ |
| Carousel | ✅ | ✅ |
| Chat bubble | ✅ | ✅ |
| Collapse | ✅ | ✅ |
| Countdown | ✅ | ✅ |
| Diff | ✅ | ✅ |
| Hover 3D Card | - | ✅ |
| Hover Gallery | - | ✅ |
| Kbd | ✅ | ✅ |
| List | - | ✅ |
| Stat | ✅ | ✅ |
| Status | - | ✅ |
| Table | ✅ | ✅ |
| Text Rotate | - | ✅ |
| Timeline | ✅ | ✅ |

#### Navigation

| Name | v1 | v2 |
| ------------------------ | --- | --- |
| Breadcrumbs | ✅ | ✅ |
| Dock (Bottom navigation) | | ✅ |
| Link | ✅ | ✅ |
| Menu | ✅ | ✅ |
| Navbar | ✅ | ✅ |
| Pagination | ✅ | ✅ |
| Steps | ✅ | ✅ |
| Tab | ✅ | ✅ |

#### Feedback

| Name | v1 | v2 |
| --------------- | --- | --- |
| Alert | ✅ | ✅ |
| Loading | ✅ | ✅ |
| Progress | ✅ | ✅ |
| Radial progress | ✅ | ✅ |
| Skeleton | ✅ | ✅ |
| Toast | ✅ | ✅ |
| Tooltip | ✅ | ✅ |

#### Data input

| Name | v1 | v2 |
| ---------- | --- | --- |
| Checkbox | ✅ | ✅ |
| Fieldset | - | ✅ |
| File input | ✅ | ✅ |
| Filter | - | ✅ |
| Label | - | ✅ |
| Radio | ✅ | ✅ |
| Range | ✅ | ✅ |
| Rating | ✅ | ✅ |
| Select | ✅ | ✅ |
| Text input | ✅ | ✅ |
| Textarea | ✅ | ✅ |
| Toggle | ✅ | ✅ |
| Validator | - | ✅ |

#### Layout

| Name | v1 | v2 |
| ------------------ | --- | --- |
| Divider | ✅ | ✅ |
| Drawer | ✅ | ✅ |
| Footer | ✅ | ✅ |
| Hero | ✅ | ✅ |
| Indicator | ✅ | ✅ |
| Join (group items) | ✅ | ✅ |
| Mask | ✅ | ✅ |
| Stack | ✅ | ✅ |

#### Mockup

| Name | v1 | v2 |
| ------- | --- | --- |
| Browser | ✅ | ✅ |
| Code | ✅ | ✅ |
| Phone | ✅ | ✅ |
| Window | ✅ | ✅ |

---

$3

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