Component showcase

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().

Aa.text-brand-gradient · .bg-brand-sheen · .glow-brand

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.

bg-base

bg-elevated

bg-card

border-subtle

border-default

accent

success

warning

error

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

shadow-xs

shadow-sm

shadow-md

shadow-lg

Utility Classes

Apps built on YunUI use these classes directly — the design lives in CSS; components are thin wrappers.

Badges (.badge-* + variants)

successwarningerrorinfoFellowApprovedPendingVisionThinkingFunction CallingYAMLAPIActiveInactiveDeprecated

Buttons via raw .btn classes

Nav items (.nav-item — sidebar building block)

Section

Active item Inactive item Another item

Dashboard Demo

Overview

A page composed from YunUI layout pieces — just like a real product page.

4.2%

Balance

0

12.0%

Requests

0

API keys

0

3.0%

Spend

0

1,284

Balance

952

Requests

18

API keys

3

Spend

Getting started

bash

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.

1

2

3

PageLayout

Full-height page shell — navbar slot · offset main · footer slot.

navbar slot

main content

footer slot

Buttons & Actions

Variants

Sizes & states

Icon button & shiny

Form Controls

Input & textarea

Email

Password, number & keys

Password

Quantity

Press ⌘ K to open search.

Checkbox & switch

Subscribe

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.

Compact Comfortable Spacious

FileDropzone

Drag-and-drop (or click-to-browse) upload target. Reports files via onFiles; the host owns the upload.

Drop images here, or click to browse

PNG, JPG · up to 10MB

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

Pro planActive

Everything in Basic, plus higher limits.

DefaultInfoWarningError

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)	Claude Code	Anthropic	Chat	Approved	200.00K	128.00K	5.00K / 25.00K	ChatFunction CallingStreamingThinking
	GPT-5.1	OpenAI	OpenAI	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.

Claude Opus (Agent)

供應商 / Provider: Claude Code
開發者 / Developer: Anthropic
類型 / Type: Chat
狀態 / Status: Approved
上下文 / 解析度: 200.00K
最大輸出 TOKEN: 128.00K
價格（輸入/輸出）: 5.00K / 25.00K

能力 / Capabilities

ChatFunction CallingStreamingThinking

FLUX.1 KontextYAMLSuspended

供應商 / Provider: fal.ai
開發者 / Developer: Black Forest
類型 / Type: Image generation
狀態 / Status: Pending
上下文 / 解析度: 256–2048 × 256–2048
最大輸出 TOKEN: —
價格（輸入/輸出）: 25.00 /req

能力 / Capabilities

Image EditNegative PromptSeed ControlLoRA Support

Avatar & progress

YX

Animated number

Springs from 0 on mount — re-enter the section to replay.

Requests

0

Uptime

0%

Latency

0ms

Tabs

Inbox content.

Collapsible

Bento grid

Fast

Sub-second interactions.

Scalable

From prototype to prod.

Polished

Designed down to the detail.

Marquee

OpenAIAnthropicDeepSeekMistralGoogle

Accordion

Collapsible sections — single or multiple open.

AreaChart

Interactive line/area chart for a time series — smooth curve, gradient fill, dashed grid, and a hover tooltip. Fills its container.

8:0010:0012:0014:0016:0018:00

Sparkline

Tiny inline line/area charts for a rolling number series — throughput, GPU utilization, latency. Pure SVG, tone-colored.

Gauge

Circular percentage rings for GPU / cache / disk. The arc color follows a semantic tone (often a threshold).

38%

71%

94%

64%

CACHE

SegmentedBar

A proportional multi-segment bar for memory allocation or a request mix, with an optional legend.

Active22 GB

Cache12 GB

AudioPlayer

A controls bar around an HTML5 audio element — play/pause, seek, time, download. For TTS output and ASR inputs.

sample-tone.wav

0:00 / 0:00

Media Gallery

A unified grid/list of generated media results with per-item status, progress, expiry handling, and download/delete/preview controls.

A misty pine forest at dawn, volumetric light

flux-schnell•1024×1024

Retro-futuristic city skyline, neon reflections

flux-schnell•1024×1024

Processing…

Isometric cozy reading nook, soft afternoon light

flux-schnell•1024×1024

Generation failedContent policy violation

Abstract fluid gradient wallpaper

flux-schnell•1024×1024

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.

Loading…

Couldn't load models.

No models yet

Add a provider to get started.

Media states

MediaLoadingState · MediaErrorState · MediaEmptyState — used across the media generation pages.

Generating…

Error

Generation failed — try again.

No images yet

Your generated images will appear here.

Thinking block (AI)

Let me reason about this step by step… 1. Parse the request 2. Plan the answer

Agent Timeline

Isolate the failing test, then read the traceback.

—

$pnpm test sum.test.ts

✓ adds positives ✗ adds negatives 1 failed, 1 passed

—

Agent run status & text shimmer

Chat attachment

quarterly-report.pdf

2.4 MB · PDF

dataset.csv

Uploading… 68%

video.mov

File exceeds 25 MB limit

Inline citation

The Transformer architecture was introduced in 2017and now underpins most large language models.

Marketing kit

Extracted from Yunxin: section rhythm, feature tile, hero, CTA band and pull quote.

Why YunUI

Care, in the details.

Not the most components — the most considered ones.

Composed

Primitives, patterns and AI components, typed end to end.

Token-driven

Light, dark and a true-black OLED theme.

Considered

Every hover, every stagger, decided once.

Fellows programme

Build with us. On us.

Six weeks of credits, review and a room full of people shipping the same week you are.

Free to apply6 weeksOpen source

We would rather ship one screen that feels considered than ten that feel generated.

— The Fellows charter

Ready when you are.

Install the package, wire the adapter, ship the first screen this afternoon.

Nav state indicator

Settings shell

Grouped desktop nav, compact mobile picker, one scroll-safe content lane.

Settings

Profile

The profile panel. The host owns the active panel and its content; YunUI owns the navigation layout and active states.

Toast (sonner)

Themed toast helpers — success / error / info / warning.

Alert

Heads up

Your trial ends in 3 days.

Saved

Your changes have been saved.

Usage is approaching your monthly limit.

Payment failed

Update your billing details to continue.

Tags, avatars & separator

visionstreamingfunction-calling

YH

AI

UI

+2

Status, inline code & steps

OnlineBusyAwayOffline

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

Healthy50ms

Local ProviderBuilt-in adapter

10 modelsEnabled

Cloudflare Worker

Healthy1588ms

Key Configuredhttps://api.cloudflare.com/…Built-in adapter

95 modelsEnabled

Navigation

Nav tabs

Language switcher (AI)

Breadcrumb

Accessible trail — nav landmark + aria-current.

Pagination

Numbered pager with sibling/boundary truncation.

ThemeToggle

light / zinc-dark / true-black / system — backed by next-themes.

Patterns

Media page header

Title + sync button + error/stats — used across the media generation pages.

Images

Generate and manage your images.

128images

42this month

Model card

AI model card — icon is a slot, all fields are props (no API/schema coupling).

Claude Opus 4.8

Most capable model for complex reasoning and agentic work.

Anthropic

200Kpro$15/M

DeepSeek R1Unofficial

Open reasoning model with strong math and code.

DeepSeek

64K$0.55/M

Model select

A generic, searchable model picker — provider grouping + capability filters + a pinned section. Domain-agnostic: map your models to options.

Show pricing in rows

Full icon set

Every bundled brand icon (309 brands, lobe avatar tiles). Resolved by id from /icons — search to filter.

openai

anthropic

claude

claudecode

google

gemini

gemma

deepseek

Introducing YunUI

One design system, every project in sync.

Jun 21, 20264 min readyuhuan

Blog post header

Full article header — category, title, author, date and reading time.

Engineering

Building a shared design system

How the design system is versioned and synced across every project.

y

yuhuan

June 21, 20266 min read

#design-system #react #monorepo

Category filter & pagination

CategoryFilter + BlogPagination — both controlled; the host owns routing.

...

Page 3

Page 3 · category: Engineering

Code demo (tabbed)

CodeDemo — a tabbed CodeBlock preset with Python / Node.js / cURL quick-start snippets.

1import openai
2 
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.

Markdown GitHub

Account locked card

Terminal auth screen (banned / suspended) — presentational; the host owns logout/redirect via onBack.

YunUI

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.

Scheduled maintenanceSunday 02:00–03:00 UTC.

2h ago

View

v1.4.0 shippedFaster exports and a new dark theme.

1d ago

View

Verify your emailSome features stay locked until you do.

View

Payment failedUpdate your card to avoid interruption.

View

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.

Notifications

2 unread

View all

Inline status

A compact async-job status: a (spinning) icon plus a label, or a percentage while running.

Starting62%DoneFailed

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.

MacBook ProCurrent

Chrome on macOS

203.0.113.7Active now

iPhone 15

Safari on iOS

198.51.100.223h ago

Windows PCInactive

Edge on Windows

192.0.2.442d ago

Metric bar

A labelled row with a thin proportion bar for 'top N' breakdowns — spend by provider, usage by category, storage by bucket.

OpenAI4,820 credits

Anthropic3,140 credits

Google1,090 credits

Mistral410 credits

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.

Email notifications

Receive a summary of account activity in your inbox.

Push notifications

Get notified on your devices the moment something happens.

Weekly digest

Link row

A tappable row that links somewhere — leading icon, title + description, trailing chevron. For support links and settings navigation.

Help center

Guides, FAQs and troubleshooting

Documentation

API reference and integration guides

Privacy policy

How we handle your data

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.

GitHub· primary

@octocat

Connected 3 months ago

Google

[email protected]

Connected 1 year ago

Avatar uploader

A clickable avatar that opens a file picker — image or initials fallback, a camera overlay on hover, and a spinner while uploading.

Fellows banner

Join the Fellows program

Selective access for builders and researchers.

Pro-level limits · Priority support · Early features

Apply

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

Content

The content-rendering stack — markdown, code, math, diagrams and callouts for LLM / chat / doc output. Lives on @yuhuanowo/yunui/content with on-demand shiki + mermaid.

MarkdownRenderer

Full GFM markdown with math, Shiki code, Mermaid diagrams, GitHub callouts and lazy zoomable images — one string in, rich UI out.

Markdown renderer

Full GFM with emphasis, ~~strikethrough~~, links and inline code.

Note

Callouts use GitHub's > [!TYPE] blockquote syntax — note, tip, important, warning, caution.

Table

Feature	Supported	Notes
Tables	✅	GitHub-flavored
Task list	✅	Interactive checkboxes
Math	✅	KaTeX inline & block

Task list

Render headings, tables and lists
Highlight code with Shiki
Ship to production

Code

TypeScript

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Math

The Gaussian integral is

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

, and in block form:

E = mc^2

Diagram

Rendering diagram…

CodeBlock

Shiki-highlighted code with a filename header, line numbers, highlighted lines and copy. The highlighter loads on demand.

button.tsx

export function Button({ label }: { label: string }) {
  return <button className="btn btn-primary">{label}</button>;
}

CalloutBlock

GitHub-style admonitions — note, tip, important, warning, caution, success.

Note

Useful information the user should know.

Tip

A helpful suggestion for doing things better.

Warning

Urgent info that needs immediate attention.

Deployed

The operation completed successfully.

MathRenderer

LaTeX via KaTeX — inline or centered block.

Inline: the quadratic formula is for .

MermaidDiagram

On-demand Mermaid diagrams that re-theme for light / dark.

Rendering diagram…

ContentImage

A lazy-loaded, click-to-zoom image for markdown / LLM output — rounded, bordered and lightbox-ready.

Stylized night landscape with a full moon over mountain ridges

Chat

Presentational, slot-based building blocks for AI chat UIs — a message row, a smart-scroll list, an auto-growing composer and a header shell. Lives on @yuhuanowo/yunui/chat and pairs with the content subpath for markdown bodies.

Chat

A ChatHeader, a ChatMessageList of ChatMessage rows (assistant body via MarkdownRenderer), and a controlled ChatComposer. Type a message and press Enter.

Assistant

Online

You

9:41 AM

How do I compose a chat UI with YunUI?

Assistant

gpt-4o

2.57K tokens49.8 tok/s51611 ms

9:41 AM

Here's a quick plan:

Install @yuhuanowo/yunui and wrap your app in YunUIProvider.
Compose ChatMessage rows inside a ChatMessageList.
Render markdown bodies with MarkdownRenderer from the content subpath.

TSX

<ChatMessageList>
  <ChatMessage role="user">Hi!</ChatMessage>
</ChatMessageList>

Ready when you are.

Every YunUI component, on one page.

Foundations

Utility Classes

Dashboard Demo

Overview

Getting started

Layout & Chrome

Buttons & Actions

Form Controls

Overlays

Data Display

What is YunUI?

How do projects sync?

Does it support theming?

Feedback

No messages

Care, in the details.

Composed

Token-driven

Considered

Build with us. On us.

Ready when you are.

Settings

Profile

Claude Code

Cloudflare Worker

Navigation

Patterns

Images

Introducing YunUI

Account suspended

Notifications

Coming soon

Join the Fellows program

Content

Markdown renderer

Table

Task list

Code

Math

Diagram

Chat