🌼 daisydew

Elegant, ergonomic, and type-safe UI components for SolidJS built on top of daisyUI 5 and Tailwind CSS.

daisydew abstracts the markup, accessibility logic, and variant coordination of daisyUI into a minimal, clean, and highly performant component library with zero DOM bloat.

---

✨ Key Features

• Semantic & Modern HTML: Leverages native platform elements like <dialog> and the HTML Popover API instead of heavy JavaScript implementations.
• Zero DOM Bloat: Every element is scrutinized to avoid unnecessary wrappers and containers.
• SolidJS Reactivity: Built to preserve fine-grained reactivity using SolidJS's splitProps/mergeProps.
• Type Safety: Fully typed variants powered by class-variance-authority (CVA).
• Unit Tested: Rigorously tested using Vitest Browser Mode (Playwright) and Storybook CSF stories.

---

🚀 Getting Started

Installation

Install daisydew and its peer dependencies in your SolidJS project:

pnpm add daisydew
pnpm add -D tailwindcss daisyui class-variance-authority clsx tailwind-merge

Usage

import { Button } from "daisydew";

function App() {
  return (
    <Button variant="primary" size="md" onClick={() => alert("Hello!")}>
      Click Me
    </Button>
  );
}

---

🛠️ Development Workflow

This project is powered by Vite+ (vp), a unified toolchain for building, formatting, linting, and testing modern web applications.

Setup

# Install dependencies
vp install

Storybook

Develop components in isolation using Storybook:

pnpm storybook

Testing

Run the test suite in a headless browser (Vitest Browser Mode via Playwright):

vp test

Code Quality & Formatting

Format, lint, and type check the entire codebase:

vp check --fix

Production Build

Compile and bundle the package for publication:

vp pack

---

📊 daisyUI Components Porting Status

Below is the status of components ported from daisyUI 5:

Component	Status	Component	Status
accordion	⏳ Pending	avatar	✅ Ported
aura	✅ Ported	badge	✅ Ported
alert	⏳ Pending	breadcrumbs	✅ Ported
button	✅ Ported	calendar	⏳ Pending
card	✅ Ported	carousel	✅ Ported
chat	✅ Ported	checkbox	⏳ Pending
collapse	✅ Ported	countdown	✅ Ported
diff	✅ Ported	divider	⏳ Pending
dock (app bar)	⏳ Pending	drawer (sidebar)	⏳ Pending
dropdown	✅ Ported	fab	✅ Ported
fieldset	⏳ Pending	file-input	⏳ Pending
filter	⏳ Pending	footer	⏳ Pending
hero	⏳ Pending	hover-3d	✅ Ported
hover-gallery	✅ Ported	indicator	⏳ Pending
input	⏳ Pending	join (group)	⏳ Pending
kbd	✅ Ported	label	⏳ Pending
link	⏳ Pending	list	✅ Ported
loading	⏳ Pending	mask	⏳ Pending
menu	⏳ Pending	mockup-browser	⏳ Pending
mockup-code	⏳ Pending	mockup-phone	⏳ Pending
mockup-window	⏳ Pending	modal	✅ Ported
navbar	⏳ Pending	otp	⏳ Pending
pagination	⏳ Pending	progress	⏳ Pending
radial-progress	⏳ Pending	radio	⏳ Pending
range	⏳ Pending	rating	⏳ Pending
select	⏳ Pending	skeleton	⏳ Pending
stack	⏳ Pending	stat	✅ Ported
status	✅ Ported	steps	⏳ Pending
swap	✅ Ported	tab	⏳ Pending
table	⏳ Pending	text-rotate	✅ Ported
textarea	⏳ Pending	theme-controller	⏳ Pending
timeline	✅ Ported	toast	⏳ Pending
toggle (switch)	⏳ Pending	tooltip	⏳ Pending
validator	⏳ Pending

---

📄 License

MIT License.