Getting Started
Install YunUI, wire up Tailwind, and plug in the framework adapters.
YunUI is a versioned React 19 + Tailwind v4 design system that doesn't shout — tokens, animations, primitives, and higher-level patterns, every detail quietly considered. See it live at ui.yuhuanstudio.com, or bump the version and every project on @yuhuanowo/yunui picks up the same look on its next upgrade.
Install
pnpm add @yuhuanowo/yunui
# peer deps (most apps already have these)
pnpm add react react-dom lucide-react
YunUI ships ESM with "use client" boundaries baked in, so it works in the Next.js App Router out of the box.
Tailwind setup
YunUI's components render canonical utility classes (.card, .btn-primary, .badge, …) defined in its stylesheet. Import the CSS and let Tailwind v4 scan the compiled package so those classes are generated:
/* globals.css */
@import "tailwindcss";
@import "@yuhuanowo/yunui/css";
/* Tailwind v4: scan YunUI's compiled output for the utility classes it uses. */
@source "../node_modules/@yuhuanowo/yunui/dist";
Don't skip the @source line
Tailwind v4 only generates the utility classes it sees in scanned files. YunUI's
components live in node_modules, which Tailwind ignores by default — so you must
add this line or those classes never get emitted and components render unstyled:
@source "../node_modules/@yuhuanowo/yunui/dist";
Adjust the relative path so it points at @yuhuanowo/yunui/dist from your globals.css.
Components rendering unstyled?
You almost certainly missed the @source line above (or its path doesn't resolve to
node_modules/@yuhuanowo/yunui/dist). Add it, restart the dev server so Tailwind
re-scans, and the .card / .btn-* / .badge styles will appear.
If you also use fumadocs, import its preset before YunUI so the design-system tokens win:
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "@yuhuanowo/yunui/css";
Adapters
The mid-coupling components (yunui/patterns, yunui/ai) need framework primitives — routing, <Image>, and i18n — which differ per app. Inject them once at the root via YunUIProvider:
import { YunUIProvider } from "@yuhuanowo/yunui/adapters";
import NextLink from "next/link";
import NextImage from "next/image";
import { useRouter } from "next/navigation";
<YunUIProvider
adapters={{
Link: NextLink,
Image: NextImage,
useRouter: () => {
const r = useRouter();
return { push: r.push, replace: r.replace, back: r.back };
},
useT: (ns) => (key) => key, // wire up next-intl / your i18n here
}}
>
{children}
</YunUIProvider>
Entry points
YunUI is split into focused entry points so apps only pull in what they use:
@yuhuanowo/yunui — atomic primitives (Button, Card, Dialog, Tabs, layout, table…)
@yuhuanowo/yunui/patterns — page-level compositions (Sidebar, Footer, StatCard, FAQ…)
@yuhuanowo/yunui/ai — AI product components (ModelCard, ThinkingBlock, provider icons…)
@yuhuanowo/yunui/adapters — the framework adapter provider
@yuhuanowo/yunui/css — the design-system stylesheet
Head to Components for the full catalog with live previews and prop tables.