Every YunUI component, on one page.
The full gallery — every exported primitive, form control, overlay, data-display piece, layout chrome, pattern and AI component, each in a live Preview / Code frame. Jump to a category below or scroll the whole thing.
Live theming
Pick a preset or a single brand palette — the whole page re-themes instantly, no rebuild. Drives data-brand/accent/neutral via useYunUITheme().
Foundations
The tokens, type scale, surfaces and motion that define the YunUI look.
Color tokens
CSS variables, theme-aware — they re-map under .dark and .true-black.
Type scale
Heading XL
Heading LG
Heading MD
Body — the default paragraph rhythm and color.
Caption — secondary supporting text.
LABEL · UPPERCASE
font-mono · JetBrains Mono 0123456789
Surfaces
.card · .glass-card · .glass-panel · .stat-card
.card
Base surface
.glass-card
Frosted
.glass-panel
Elevated glass
.stat-card
128K
Radii & shadows
Utility Classes
Apps built on YunUI use these classes directly — the design lives in CSS; components are thin wrappers.
Badges (.badge-* + variants)
Buttons via raw .btn classes
Nav items (.nav-item — sidebar building block)
Dashboard Demo
Overview
A page composed from YunUI layout pieces — just like a real product page.
Getting started
1curl https://api.example.com/v1/models \2 -H "Authorization: Bearer $KEY"Layout & Chrome
Navbar, Sidebar and Footer — framed previews of the fixed app chrome.
Navbar
Floating top nav; switcher/toggle are slots, links are props.
Sidebar — with collapse
Click the toggle to collapse / re-open. nav-item active states included.
Footer
Sections + social are props; layout and styling are the design system.
Flex
Flexbox layout primitive — direction, gap, align/justify as props.
PageLayout
Full-height page shell — navbar slot · offset main · footer slot.
Form Controls
Input & textarea
Password, number & keys
Press ⌘ K to open search.
Checkbox & switch
Segmented select
Custom select & combobox
Radix select
Slider
Value: 40
Capability selector (AI)
Multi-select capability chips for AI models.
Selected: vision, thinking
Provider select — real provider icons (AI)
CustomSelect with the bundled provider-icon system; Combobox above also uses it.
RadioGroup
Single-choice group — keyboard-navigable, label-wrapped items.
Overlays
Dialog (Radix)
Modal & Sheet (custom)
Popover, tooltip, dropdown
Dropdown — checkbox & radio items
DropdownMenuCheckboxItem (toggles) and DropdownMenuRadioGroup / DropdownMenuRadioItem (single choice).
Confirm modals
ConfirmModal plus the DeleteConfirmModal / RegenerateConfirmModal presets — portal-rendered with scroll lock and escape-to-close.
Data Display
Cards & badges
Everything in Basic, plus higher limits.
Table
The Table primitive carrying a dense, many-column admin model row (icons, id chips, badge groups, multi-line price, row actions). Scrolls horizontally when the columns outgrow the viewport.
| 名稱 | 供應商 | 開發者 | 類型 | 狀態 | 上下文 / 解析度 | 最大輸出 TOKEN | 價格（輸入/輸出） | 能力 | 操作 | |
|---|---|---|---|---|---|---|---|---|---|---|
 Claude Opus (Agent) |  | | Chat | Approved | 200.00K | 128.00K | 5.00K / 25.00K | ChatFunction CallingStreamingThinking | ||
 GPT-5.1 | | | Chat | Approved | 400.00K | 128.00K | 1.25K / 10.00K | ChatVisionFunction CallingStreaming |
Model manager card
A dense admin model row as a card — EVERY column present (name + ids, provider, developer, type, status, context / resolution, max output, price in/out, capabilities, actions). Starting point for discussing the model-management layout.
- 供應商 / Provider
- Claude Code
- 開發者 / Developer
- Anthropic
- 類型 / Type
- Chat
- 狀態 / Status
- Approved
- 上下文 / 解析度
- 200.00K
- 最大輸出 TOKEN
- 128.00K
- 價格（輸入/輸出）
- 5.00K / 25.00K
- 供應商 / Provider
- fal.ai
- 開發者 / Developer
- Black Forest
- 類型 / Type
- Image generation
- 狀態 / Status
- Pending
- 上下文 / 解析度
- 256–2048 × 256–2048
- 最大輸出 TOKEN
- —
- 價格（輸入/輸出）
- 25.00 /req
Avatar & progress
Animated number
Springs from 0 on mount — re-enter the section to replay.
Tabs
Inbox content.
Collapsible
Bento grid
Marquee
Accordion
Collapsible sections — single or multiple open.
Feedback
Skeleton & spinner
Empty state
No messages
When you get messages they'll show up here.
Page loader
Full-screen centered loader for route transitions — framed here in a fixed-height stage (its min-h-dvh is capped to the frame).
Loading workspace
Fetching your models and keys…
Page states
PageLoadingState · PageErrorState · PageEmptyState — the in-content (not full-screen) variants.
Media states
MediaLoadingState · MediaErrorState · MediaEmptyState — used across the media generation pages.
Thinking block (AI)
Toast (sonner)
Themed toast helpers — success / error / info / warning.
Alert
Heads up
Saved
Payment failed
Tags, avatars & separator
Status, inline code & steps
Install with pnpm add @yuhuanowo/yunui
Create account
Sign up with email or OAuth.
Add an API key
Generate a key in the dashboard.
Make a request
Call the gateway from your app.
Provider card — footer alignment in a grid
A real provider-card layout: card-col + card-footer pin the model count + toggle to the bottom, so cards with different badge rows still line up across the grid.
Claude Code
Cloudflare Worker
Patterns
Media page header
Title + sync button + error/stats — used across the media generation pages.
Images
Generate and manage your images.
Model card
AI model card — icon is a slot, all fields are props (no API/schema coupling).
Model select
A generic, searchable model picker — provider grouping + capability filters + a pinned section. Domain-agnostic: map your models to options.
Full icon set
Every bundled brand icon (309 brands, lobe avatar tiles). Resolved by id from /icons — search to filter.
AI avatars & type icons
ProviderAvatar / ModelAvatar (rounded, image-backed), ProviderIconImg (short alias) and ModelTypeIcon (capability glyphs).
ProviderAvatar
ModelAvatar (developer-resolved, with iconUrl fallback)
ProviderIconImg (rounded alias)
ModelTypeIcon
Fumadocs button variants
buttonVariants — a class-variance-authority recipe for fumadocs-themed buttons; applied to plain elements via className.
Code block
1curl https://api.example.com/v1/chat/completions \2 -H "Authorization: Bearer $KEY"FAQ
Blog card
Blog post header
Full article header — category, title, author, date and reading time.
Building a shared design system
How the design system is versioned and synced across every project.
Category filter & pagination
CategoryFilter + BlogPagination — both controlled; the host owns routing.
Page 3 · category: Engineering
Code demo (tabbed)
CodeDemo — a tabbed CodeBlock preset with Python / Node.js / cURL quick-start snippets.
1import openai2 3client = openai.OpenAI(4 base_url="https://api.example.com/v1",5 api_key="your_api_key"6)7 8response = client.chat.completions.create(9 model="deepseek-r1",10 messages=[{"role": "user", "content": "Hello!"}]11)12 13print(response.choices[0].message.content)Docs page actions
LLMCopyButton (copy page as Markdown for an LLM) and ViewOptions (raw Markdown / GitHub links) — the fumadocs-styled doc header actions.
Account locked card
Terminal auth screen (banned / suspended) — presentational; the host owns logout/redirect via onBack.
Account suspended
Your account has been temporarily locked for review.
If you think this is a mistake, you can appeal the decision.
Banner
Tinted announcement / release / verification rows (info · warning · critical · success). Dismissible; icon, meta and actions are slots.
Notification
Presentational notification center — a bell with an unread badge, the dropdown panel chrome, and rows with type icons, time and a hover dismiss. The host owns data.
Inline status
A compact async-job status: a (spinning) icon plus a label, or a percentage while running.
Session item
A row in an active-sessions / signed-in-devices list — device glyph, name with current/inactive badges, browser·OS, IP + last-seen, revoke.
Metric bar
A labelled row with a thin proportion bar for 'top N' breakdowns — spend by provider, usage by category, storage by bucket.
Feature locked state
The centered 'feature unavailable' screen — icon medallion, title, description and an optional dashed restricted-note card.
Coming soon
Video generation isn't on your plan yet.
Access restricted
This feature is limited to higher tiers — contact your admin to enable it.
Setting row
One labelled row in a settings list — title, optional description, and a trailing control slot (Switch, Select, button). Stack several; a divider separates them.
Link row
A tappable row that links somewhere — leading icon, title + description, trailing chevron. For support links and settings navigation.
Connected account row
A row in a connected-accounts list — provider avatar with a badge overlay, name + sub-name, detail line, connected-time footer, and an unlink button.
Avatar uploader
A clickable avatar that opens a file picker — image or initials fallback, a camera overlay on hover, and a spinner while uploading.
Error boundary (catches a crashing child)
Child renders fine — click to crash it.
Background effects (decorative)
A subtle dotted radial backdrop — it sits behind your page content (intentionally faint).
Your content here
BackgroundEffects renders behind it