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

• [x] Button
• [x] Dropdown
• [x] Modal
• [x] Swap
• [x] Theme Controller

Data display

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

Navigation

• [x] Breadcrumbs
• [x] Bottom navigation
• [x] Link
• [x] Menu
• [x] Navbar
• [x] Pagination
• [x] Steps
• [x] Tab

Feedback

• [x] Alert
• [x] Loading
• [x] Progress
• [x] Radial progress
• [x] Skeleton
• [x] Toast
• [x] Tooltip

Data input

• [x] Checkbox
• [x] File input
• [x] Radio
• [x] Range
• [x] Select
• [x] Text input
• [x] Textarea
• [x] Toggle

Layout

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

Mockup

• [x] Browser
• [x] Code
• [x] Phone
• [x] Window

License

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