Lightweight UI component library based on tailwindcss v4, optimized for edge and serverless environments
A lightweight, edge-first React UI library built on TailwindCSS v4.
Optimized for Cloudflare Pages, serverless, and SSR environments.
npm install dandy-ui
@import "tailwindcss";
@import "dandy-ui/theme.css";
@import "dandy-ui/base.css";
import { ThemeProvider } from "dandy-ui";
<ThemeProvider>
<App />
</ThemeProvider>;
For SSR, add <ThemeScript /> in <head> to prevent flash of unstyled content.
| Entry | Purpose | Example |
|---|---|---|
dandy-ui | Core components | import { Button, Dialog } from "dandy-ui" |
dandy-ui/extra | Heavy components (optional deps) | import { Drawer, DatePicker } from "dandy-ui/extra" |
dandy-ui/markdown | Markdown renderer | import { MarkdownViewer } from "dandy-ui/markdown" |
dandy-ui/utils | Pure utility functions | import { formatDate, debounce } from "dandy-ui/utils" |
Layout — Container · Flex · Grid · Paper · Section · Table · ScrollShadow
Typography — Text · Heading · Hint · Label · Divider · Code · Kbd
Forms — Button · IconButton · Input · TextArea · NumberInput · Select · CheckBox · Radio · Switch · Slider · FileInput · Rating · Icon
Feedback — Alert · Badge · Chips · Spinner · Skeleton · ProgressBar · CircularProgress
Overlays — Dialog · Popover · InfoTip · SnackbarProvider
Compound — Accordion
Extra — Drawer · DatePicker · DateRangePicker · MultiDatePicker · MultiSelect · InputOTP · SidebarLayout · SideBar
Markdown — MarkdownViewer
Required:
npm install react react-dom tailwindcss @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-tooltip
Optional (only if using dandy-ui/extra or dandy-ui/markdown):
| Package | Component |
|---|---|
vaul | Drawer |
react-day-picker | DatePicker, DateRangePicker, MultiDatePicker |
input-otp | InputOTP |
react-markdown rehype-highlight rehype-raw rehype-sanitize remark-gfm | MarkdownViewer |
CSS custom properties defined in theme.css. Never hardcode colors.
Tokens: primary · secondary · accent · background · foreground · muted · border · card · popover · success · warning · error · info
Each has a -foreground variant. Dark mode activates via the dark class.
<div className="bg-primary text-primary-foreground" />
MIT © Nidhal Bettaibi
FAQs
Lightweight UI component library based on tailwindcss v4, optimized for edge and serverless environments
The npm package dandy-ui receives a total of 151 weekly downloads. As such, dandy-ui popularity was classified as not popular.
We found that dandy-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.