Components
62 components across 8 categories — each documented with live examples and the exact code that produced them.
Actions
Surfaces
Card
Glass surface with optional cursor-tracking spotlight.
Dialog
Service-driven glass dialog — focus trap, sizes.
Toast
Service-driven toast stack — auto-dismiss, 6 positions.
Chat
Conversation surface — scrollable log plus pinned composer.
Popover
Anchored floating panel — portals to body, placements.
Markdown
Renders CommonMark + GFM — fenced code, XSS-safe.
Navigation
Data
Badge
Neutral · Accent · Success · Warning · Danger, optional dot.
Avatar
Image → initials → icon fallback; sizes, presence dot.
Image
Responsive image — ratios, skeleton, fallback, AI reveal.
Table
Declarative columns — search, sort, filter, paging, more.
Pagination
Standalone page navigator with smart-ellipsis range.
Tree View
Hierarchical tree — WAI-ARIA keyboard nav, roving tabindex.
Timeline
Vertical event rail — variants, timestamps, AI step traces.
Stat
KPI card — value, delta chip, optional sparkline slot.
Sparkline
Inline-SVG trend chart (zero JS) — Line / Area / Bar.
Description List
Semantic key/value view — Stacked or Inline, columns.
Keyboard Key
Keyboard-shortcut chips — single key or chord, pure CSS.
Code Block
Glass code surface — server-side highlighting, copy button.
Citation
Inline [n] source chips with popover — RAG answers.
Icons
Lucide-based line icon set, currentColor stroked.
Inputs
Input Text
Form-bound text input — leading/trailing icon slots.
Password
Password input with show / hide eye toggle.
Number
Generic numeric input with optional ± stepper.
Form Controls
Textarea, select, checkbox, toggle — EditForm-integrated.
Radio Group
Radio group — vertical or horizontal layout.
Segmented Control
Exclusive view / mode switch — gliding accent indicator.
Multi Select
Multi-selection dropdown — removable chips, @bind.
Slider
Range slider — accent gradient fill.
File Upload
Drag-and-drop or click-to-browse, multiple files.
Autocomplete
Generic combobox — client SearchFunc or async provider.
Date Picker
Calendar panel — keyboard nav, Min/Max, range mode.
Time Picker
Time-only picker — scrollable hour/minute, MinuteStep.
Chip Input
Free-text tag field — Enter / comma to commit, MaxTags.
OTP Input
Fixed-box OTP entry — auto-advance, paste-to-fill.
Input Mask
Masked input — Phone / IBAN / Postal / Card / Custom.
Rating
Star rating — hover preview, AllowClear, keyboard nav.
Form Field
Label + required + hint + inline validation wrapper.
Layout
Expansion
Collapsible disclosure panel with animated chevron.
Tabs
Tabbed interface — gliding gradient underline.
Stepper
Multi-step wizard — horizontal or vertical, AI ring.
Scroll Area
Scrollable region with the thin DRYL scrollbar.
Typography
Type scale primitive — Variant look, As tag, colours.
Stack
Flex layout — direction, gap, align, justify, wrap.
List
Token-driven list — markers, density, slots, nesting.
Divider
Thin rule — horizontal, labelled or vertical.
App Shell
AppBar + Sidebar + Layout — slots, elevation, collapse.
Feedback
Alert
Feedback banner — 5 variants, optional title, dismissible.
Tooltip
CSS-only hover tooltip — 4 placements, wraps any trigger.
Spinner
Ring / Dots / Pulse — rate adapts to AI state.
Skeleton
Placeholder — Streaming shifts shimmer to violet-cyan.
Progress
Linear bar — determinate / indeterminate, percentage.
Empty State
No-data placeholder — icon, title, description, action.
Error Boundary
Glass fallback — retry / recover, dev-only detail toggle.
Notifications
Bell + inbox panel — unread badge, mark-read, AI entries.