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)
Make sure you've installed TailwindCSS and daisyUI .
Install the package with npm or yarn or pnpm:
Add rsc-daisyui to app.css @import "tailwindcss" ;
@plugin "daisyui" ;
@source "../../node_modules/rsc-daisyui/dist" ;Import rsc-daisyui components within your component files:
import { Button } from "rsc-daisyui" ;
export default ( props ) => {
return < Button color = "primary" > Click me!</ Button > ;
} ;
Name
v1
v2
Button
✅
✅
Dropdown
✅
✅
Modal
✅
✅
Swap
✅
✅
Theme Controller
✅
✅
Name
v1
v2
Accordion
✅
✅
Avatar
✅
✅
Badge
✅
✅
Card
✅
✅
Carousel
✅
✅
Chat bubble
✅
✅
Collapse
✅
✅
Countdown
✅
✅
Diff
✅
✅
Kbd
✅
✅
List
-
✅
Stat
✅
✅
Status
-
✅
Table
✅
✅
Timeline
✅
✅
Name
v1
v2
Breadcrumbs
✅
✅
Dock (Bottom navigation)
✅
Link
✅
✅
Menu
✅
✅
Navbar
✅
✅
Pagination
✅
✅
Steps
✅
✅
Tab
✅
✅
Name
v1
v2
Alert
✅
✅
Loading
✅
✅
Progress
✅
✅
Radial progress
✅
✅
Skeleton
✅
✅
Toast
✅
✅
Tooltip
✅
✅
Name
v1
v2
Checkbox
✅
✅
Fieldset
-
✅
File input
✅
✅
Filter
-
✅
Label
-
✅
Radio
✅
✅
Range
✅
✅
Rating
✅
✅
Select
✅
✅
Text input
✅
✅
Textarea
✅
✅
Toggle
✅
✅
Validator
-
✅
Name
v1
v2
Divider
✅
✅
Drawer
✅
✅
Footer
✅
✅
Hero
✅
✅
Indicator
✅
✅
Join (group items)
✅
✅
Mask
✅
✅
Stack
✅
✅
Name
v1
v2
Browser
✅
✅
Code
✅
✅
Phone
✅
✅
Window
✅
✅
This project is licensed under the MIT License - see the LICENSE.md file for details.
