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.

Storybook

Next.js (Kitchen Sink)

Sandbox

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

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

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["node_modules/rsc-daisyui/dist/**/*.js"],
  plugins: [require("daisyui")],
};
export default config;

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

• Button
• Dropdown
• Modal
• Swap
• Theme Controller

Data display

• Accordion
• Avatar
• Badge
• Card
• Carousel
• Chat bubble
• Collapse
• Countdown
• Diff
• Kbd
• Stat
• Table
• Timeline

Navigation

• Breadcrumbs
• Bottom navigation
• Link
• Menu
• Navbar
• Pagination
• Steps
• Tab

Feedback

• Alert
• Loading
• Progress
• Radial progress
• Skeleton
• Toast
• Tooltip

Data input

• Checkbox
• File input
• Radio
• Range
• Select
• Text input
• Textarea
• Toggle

Layout

• Artboard
• Divider
• Drawer
• Footer
• Hero
• Indicator
• Join (group items)
• Mask
• Stack

Mockup

• Browser
• Code
• Phone
• Window

---

License

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