Living UI Component Library
Every reusable component rendered directly in pure Rust. Each specimen follows the unified Storybook-grade specification template.
Group 01: Buttons & Links
Direct action triggers with pure CSS states and sub-microsecond event dispatch
ButtonImplementedComponents / Actions / Button
Primary interaction trigger. Pure CSS states, zero VDOM diffing, sub-microsecond event dispatch.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
variantDefault: Solid · Allowed: Solid, Soft, Outline, Ghost, Danger
sizeDefault: Md · Allowed: Sm, Md, Lg
toneDefault: Accent · Allowed: Accent, Ok, Warn, Danger, Muted
disabledDefault: false · Allowed: true, false
Idiomatic Rust API
Copyable snippet for application views
btn_kv("save", "Save Changes", BtnKind::Primary, &[("draft", "val")]) .variant(Variant::Solid) .tone(Intent::Accent) .size(Size::Md)
LinkImplementedComponents / Actions / Link
Semantic SPA navigation anchor. Direct route resolution with speculative prerender.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
hrefDefault: "#" · Allowed: Relative or internal route path
variantDefault: Ghost · Allowed: Solid, Outline, Ghost
Idiomatic Rust API
Copyable snippet for application views
link("/performance", "Open Performance") .variant(Variant::Solid)
Group 02: Form Inputs & Controls
High-performance form controls bound to HTML5 native validation and AppError envelopes
Text InputImplementedComponents / Inputs / Text Input
Single-line alphanumeric text control with HTML5 validation and AppError error binding.Live Preview
Active specimen rendered via velvet_html::view
Account Identifier
Developer Email
Property Specifications:
labelDefault: Required · Allowed: Readable form label
nameDefault: Ident · Allowed: Form post key
placeholderDefault: Optional · Allowed: Hint string
Idiomatic Rust API
Copyable snippet for application views
field("Account Identifier", "account_id", value, "Enter ID...")
SwitchImplementedComponents / Inputs / Switch Toggle
Binary toggle switch using CSS pseudo-elements and native checkbox state under the hood.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
actDefault: Required · Allowed: Act name triggered on toggle
checkedDefault: false · Allowed: Boolean toggle state
Idiomatic Rust API
Copyable snippet for application views
switch("toggle_telemetry", "telemetry", "Enable telemetry", true)
Group 03: FormBuilder & Validation
Declarative form compositors bound to closed acts with zero client-side JavaScript
FormBuilderImplementedComponents / Forms / FormBuilder
Type-safe declarative form compositor bound to closed acts with native submit handling.Live Preview
Active specimen rendered via velvet_html::view
Deployment Region
Deployment Tier
Property Specifications:
actDefault: HomeAct · Allowed: Closed enum act contract
validationDefault: v_note · Allowed: HTML5 Constraint and AppError validator
Idiomatic Rust API
Copyable snippet for application views
FormBuilder::new(HomeAct::Ping.as_str())
.required_text("draft", "Note")
.placeholder("Enter text...")
.submit("Send Act")
.build(fields)Group 04: Headings, Prose & Badges
Semantic typographic system featuring proportional scale, optical line-heights, and tone intent
Text & ProseImplementedComponents / Typography / Text Scale
Semantic typographic system featuring proportional scale, optical line-heights, and tone intent.Live Preview
Active specimen rendered via velvet_html::view
Display Heading (2.25rem · Bold)Section Heading (1.5rem · SemiBold)Body Prose Text with standard 1.5 line height for high legibility.Muted explanatory subtitle prose.
Property Specifications:
toneDefault: Default · Allowed: Accent, Ok, Warn, Danger, Muted
proseDefault: Normal · Allowed: Body, Lead, Muted, Code
Idiomatic Rust API
Copyable snippet for application views
text("High performance engine").tone(Intent::Accent)BadgeImplementedComponents / Typography / Badges & Pills
Compact semantic pill for statuses, versions, tags, and categorical indicators.Live Preview
Active specimen rendered via velvet_html::view
Solid AccentSoft SuccessOutline WarnDanger AlertMuted Tag
Property Specifications:
variantDefault: Soft · Allowed: Solid, Soft, Outline
toneDefault: Accent · Allowed: Accent, Ok, Warn, Danger, Muted
Idiomatic Rust API
Copyable snippet for application views
badge("Implemented").tone(Intent::Ok).variant(Variant::Soft)Group 05: Containers, Stacks & Bento
Zero-JS layout primitives: flex stacks, clusters, and responsive bento grids
Bento GridImplementedComponents / Layout / Bento Grid
Asymmetric 2026 bento grid engine supporting custom column spans and responsive collapse.Live Preview
Active specimen rendered via velvet_html::view
Span 2 Tile
Takes 2 grid columns
Spanning layout content.
Span 1 Tile
Takes 1 grid column
Compact box.
Span 1 Tile
Takes 1 grid column
Compact box.
Property Specifications:
spanDefault: 1 · Allowed: 1, 2, 3, 4 columns
gapDefault: Md · Allowed: Tight, Sm, Md, Lg
Idiomatic Rust API
Copyable snippet for application views
bento([
panel_icon("layers", "Title", "Sub", body).span(2),
panel_icon("cpu", "Title", "Sub", body).span(1),
])Group 06: Cards & Surfaces
Structured containers with elevation tokens, borders, and depth shadows
CardImplementedComponents / Surfaces / Card
Primary elevated surface container with border tokens, rounded corners, and depth shadow.Live Preview
Active specimen rendered via velvet_html::view
Surface: FlatSurface: ElevatedSurface: GlassSurface: Sunken
Property Specifications:
surfaceDefault: Flat · Allowed: Flat, Elevated, Glass, Sunken
Idiomatic Rust API
Copyable snippet for application views
surface(body).with_surface(Surface::Elevated)
Panel IconImplementedComponents / Surfaces / Panel Icon
Feature container uniting icon glyph, title, subtitle kicker, and arbitrary View payload.Live Preview
Active specimen rendered via velvet_html::view
Kernel Cell
Sub-microsecond dispatch
Encapsulated panel with glyph.
Property Specifications:
iconDefault: "cpu" · Allowed: Registry icon identifier
toneDefault: Accent · Allowed: Accent, Ok, Warn, Danger, Purple
Idiomatic Rust API
Copyable snippet for application views
panel_icon("cpu", "Title", "Sub", body).tone(Intent::Accent)
Group 08: Popovers & Dialogs
Native CSS Anchor Positioning and HTML5 dialogs with zero client JavaScript
CSS Anchor PopoverImplementedComponents / Overlays / CSS Anchor Popover
Ultra-modern popover positioning using native CSS Anchor Positioning and @starting-style.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
popoverDefault: auto · Allowed: Native HTML5 popover attribute with light dismiss
Idiomatic Rust API
Copyable snippet for application views
btn_kv("open_popover", "Settings", BtnKind::Ghost, &[("target", "settings-id")])
Group 09: Notices & Toasts
Semantic inline alerts, banners, and auto-dismissing toast notifications
Notice BarImplementedComponents / Feedback / Notice Bar
Inline contextual alert message with tone intent styling and icon integration.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
toneDefault: Info · Allowed: Info, Ok, Warn, Danger
Idiomatic Rust API
Copyable snippet for application views
notice_bar(text("Operation completed successfully")).tone(Intent::Ok)ButtonImplementedComponents / Feedback / Toast Lab (Tones)
Primary interaction trigger. Pure CSS states, zero VDOM diffing, sub-microsecond event dispatch.Live Preview
Active specimen rendered via velvet_html::view
Each tone fires instantly through the WASM motor — no server round-trip, no JavaScript. The tray stacks (2.8 s life) at bottom-center.
Property Specifications:
toneDefault: cue_* · Allowed: success / warn / error — instant, no server
Idiomatic Rust API
Copyable snippet for application views
btn_kv("cue_success", "Save", BtnKind::Primary, &[])
Toast NotificationsImplementedComponents / Feedback / Notification Toasts
Transient floating notifications in top/bottom tray with auto-dismiss and zero layout shift.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
durationDefault: 5s · Allowed: Auto-dismiss timer in tray
Idiomatic Rust API
Copyable snippet for application views
toast_act("File saved successfully", "undo", "Undo");
Group 10: Tables & Metric KPIs
High-density data tables and telemetry counters with zero hydration delay
Metric KPIImplementedComponents / Data / Metric KPI
High-impact visual telemetry counter featuring large numeric glyph and explanatory label.Live Preview
Active specimen rendered via velvet_html::view
0.75 µsParser Latency
99.99%Uptime SLA
0 kBClient JS Download
12 800Melem/s Event Rate
Property Specifications:
toneDefault: Accent · Allowed: Accent, Ok, Warn, Danger, Purple
Idiomatic Rust API
Copyable snippet for application views
metric("0.75 µs", "Parser Latency").tone(Intent::Accent)
Table & QueryGridImplementedComponents / Data / Dense Table
High-density data table supporting sticky column headers, sorting, and pagination without JS.Live Preview
Active specimen rendered via velvet_html::view
Verified tabular records without virtual DOM cost:
Ada LovelaceAdminada@lovelace.dev
Alan TuringEngineeralan@turing.dev
Property Specifications:
columnsDefault: Slice · Allowed: Header labels
Idiomatic Rust API
Copyable snippet for application views
table(&["Name", "Role", "Email"], rows)
Group 11: Pure Rust SVG Charts
Server-rendered SVG sparklines and telemetry bars with zero external dependencies
SVG Bars ChartImplementedComponents / Media / Telemetry Bars
Pure Rust SVG telemetry bar graph rendered in under 15 microseconds without external JS.Live Preview
Active specimen rendered via velvet_html::view
Property Specifications:
itemsDefault: Slice · Allowed: Label and numeric percentage (0.0 - 100.0)
Idiomatic Rust API
Copyable snippet for application views
bars(&[("CPU Load", 18.5), ("WASM Mem", 42.0), ("Bus Sync", 94.0)])
SVG SparklineImplementedComponents / Media / SVG Sparkline
Micro-chart area sparkline showing trends and telemetry curves directly in table rows.Live Preview
Active specimen rendered via velvet_html::view
7-day telemetry activity:
Trend: +24.8%12.8 k Req/s
Property Specifications:
valuesDefault: Slice · Allowed: f64 time-series points
Idiomatic Rust API
Copyable snippet for application views
spark_area(&[12.0, 18.0, 14.0, 22.0, 35.0, 28.0, 42.0])
Group 12: Closed Acts & MCP AI Server
Single-reducer state machines, View memoization, and Model Context Protocol endpoints
Closed Acts SystemImplementedComponents / Advanced / Closed Acts System
Single reducer, wire-safe typed enum acts shared across SSR, WASM, and MCP AI agents.Live Preview
Active specimen rendered via velvet_html::view
velvet_html::closed_act! {
pub enum HomeAct {
Ping => "saas_showcase_ping" {
islands = &["count"],
form = NoteForm
},
}
}Property Specifications:
actDefault: Enum · Allowed: Declared via closed_act! macro
Idiomatic Rust API
Copyable snippet for application views
HomeAct::Ping => { ... state.count += 1; }MCP AI ServerImplementedComponents / Advanced / Autonomous MCP AI Server
Autonomous Model Context Protocol endpoint exposing typed application acts to LLMs over JSON-RPC 2.0.Live Preview
Active specimen rendered via velvet_html::view
Exposes typed application acts to LLMs over JSON-RPC 2.0.
JSON-RPC 2.0OpenAPI 3.1/__mcp
Property Specifications:
protocolDefault: MCP · Allowed: Model Context Protocol compliant endpoint
Idiomatic Rust API
Copyable snippet for application views
velvet_serve::ServeOpts::from_env().with_kernel(&KERNEL).with_openapi()