Components
94 components across 10 categories — each documented with live examples and the exact code that produced them.
Customization
Actions
Button
Primary action — 5 variants, sizes, loading, icons.
Button Group
Segmented buttons — toggle group or clustered actions.
Split Button
Primary action plus a caret menu of its variants.
Menu
Dropdown menu — placements, icons, shortcuts, danger items.
Command Palette
⌘K launcher — declarative commands, fuzzy search, inline arguments, AI tool-call resolution.
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.
Presence
Animate a child in and out — defers unmount until done.
Depth Glass
Glass that warps in 3D toward the pointer — tilt, parallax.
Reconnect Modal
Drop-in replacement for Blazor's reconnect overlay — themed, animated.
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, animated reorder.
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 that counts up, delta chip, sparkline slot.
Sparkline
Inline-SVG trend chart (zero JS) — Line / Area / Bar.
Line Chart
Multi-series lines — axes, tooltips, smooth splines.
Bar Chart
Grouped or stacked columns — CSS-only tooltips.
Area Chart
Soft gradient fills under multi-series lines.
Donut Chart
Proportions as donut or pie — center KPI slot.
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.
Reveal
Scroll-triggered staggered entrance via IntersectionObserver.
Typography
Type scale primitive — Variant look, As tag, colours.
Stack
Flex layout — direction, gap, align, justify, wrap, collapse.
Grid
Responsive column grid — auto-fit or fixed columns.
Container
Centers content at a readable max width with padding.
Spacer
Flexible or fixed layout spacer.
Aspect Ratio
Fixed-ratio box for media and embeds.
List
Token-driven list — markers, density, slots, nesting.
Divider
Thin rule — horizontal, labelled or vertical.
App Shell
AppBar + Sidebar + Layout — slots, elevation, collapse.
Morph
Shared-element transitions — one ID, overview to detail.
Route Transition
Morphs across a real route change; Back button included.
Feedback
Alert
Feedback banner — 5 variants, optional title, dismissible.
Tooltip
Portalled hover/focus bubble — 4 placements, flips to fit.
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.
Intelligence
AI Mode
Pulsing status pill adapting label and speed to AiState.
AI Activity
Coordinate AiState across components; bind token streams.
Tool Call
Agent tool call — status pill, collapsible JSON args/result.
Tool Call Group
Collapses many tool calls into one quiet, ticking summary; expandable.
Canvas
Render a CanvasSpec as live components — charts, data grids, forms, KPIs — bound to host data sources and commands. Hand it a Selection and its elements become pickable: prompt about one, pin, duplicate, remove or reorder it.
Canvas Workspace
Named canvas views, exactly one visible; switching morphs. Undo, redo, version history and documents that survive a reload.
Agents
Overview
The Agent Framework → DRYL bridge — install, concepts, feature map.
Agent Run
Wrap a run: automatic AiState + a live tool-call trace, zero manual state.
Structured Generation
DrylAiGenerate<T> — JSON streams straight into live Blazor components.
AI Field
DrylAiField — make any input AI-capable in one line, without touching it.
Display Tools
Hand the agent charts, stats & timelines — it answers with live components.
Human-in-the-Loop
Ready-made dialog AIFunctions — the agent asks the user and waits.
AI Canvas
DrylAiCanvas — the AI answers with an interactive artifact bound to your data and commands, and the user can take it apart by hand.
Canvas Dock
Floating prompt dock — one input, one line of live status, a context chip for the selected element, the transcript on demand, Actions and Suggestions slots for the host's own controls and prompt chips, and a microphone that turns the dock into a voice panel.
Voice
Speak to your agent — a WebRTC realtime session with the same tools, the same conversation and no audio through your server.
Multi-Agent Handoff
Chain agents into one run — a living handoff timeline with a baton.
Collaborative Build
StartBuild — agent and user refine a typed artifact round by round.
Run Health
Error surfacing with retry + token-usage badges from the stream.