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 🌼

Install

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

npm

npm install rsc-daisyui

yarn

yarn add rsc-daisyui

pnpm

pnpm add rsc-daisyui

Add rsc-daisyui to app.css

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

Quick Start

Import rsc-daisyui components within your component files:

import { Button } from "rsc-daisyui";

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

Components

Actions

Name	v1	v2
Button	✅	✅
Dropdown	✅	✅
Modal	✅	✅
Swap	✅	✅
Theme Controller	✅	✅

Data display

Name	v1	v2
Accordion	✅	✅
Avatar	✅	✅
Badge	✅	✅
Card	✅	✅
Carousel	✅	✅
Chat bubble	✅	✅
Collapse	✅	✅
Countdown	✅	✅
Diff	✅	✅
Kbd	✅	✅
List	-	✅
Stat	✅	✅
Status	-	✅
Table	✅	✅
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	✅	✅

---

License

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