# DRYL — the AI-native Blazor UI component library

> DRYL is an open-source UI component library for Blazor Server and Blazor WebAssembly:
> glassy, alive, and AI-native. Every component is token-driven (two color modes, one
> identity), animated by default, keyboard-accessible, and ships zero external JavaScript
> dependencies. AI is a first-class UI state: AI-aware components accept an `Ai` parameter
> (AiState: None/Active/Thinking/Streaming/Generated/Proposed) driving one shared visual vocabulary.

Install: `dotnet add package DRYL.Components`  
Register: `builder.Services.AddDrylComponents();`  
Version: 3.13.0

## Conventions for consumers
- Components are PascalCase, `Dryl`-prefixed (DrylButton, DrylCard, …).
- Variants and sizes are strongly-typed enums, never strings. Many are nested in their component:
  write `Variant="DrylButton.ButtonVariant.Secondary"` — the bare `ButtonVariant.Secondary` does not compile.
- Components read CSS variables from `dryl.css`; never hardcode colors, sizes or radii.
- AI styling is opt-in and off by default (`Ai="AiState.None"`).

## MCP server for coding agents
DRYL runs a read-only MCP server at `https://components.dryl.dev/mcp` (Streamable HTTP, no key). Tools: `search_components`,
`get_component` (exact parameters and enum members), `get_tokens` (CSS variables, both color modes) and
`validate_markup` (checks `<Dryl…>` tags against the real API). Claude Code:
`claude mcp add --transport http dryl https://components.dryl.dev/mcp`

## Full reference
- [llms-full.txt](https://components.dryl.dev/llms-full.txt): complete API of every component, with examples
- [API reference](https://components.dryl.dev/api)
- [GitHub](https://github.com/Zimpi/DRYL.Components)
- [Discord](https://discord.gg/cs8XNJw2gH)
- [NuGet](https://www.nuget.org/packages/DRYL.Components)

## Components

### Customization
- [Theming](https://components.dryl.dev/components/theming): Seed-driven runtime themes — preset switcher + custom accent.
- [Color Mode](https://components.dryl.dev/components/color-mode): System / Light / Dark — persisted choice, animated toggle.

### Actions
- [Button](https://components.dryl.dev/components/buttons): Primary action — 5 variants, sizes, loading, icons. *(AI-aware)*
- [Button Group](https://components.dryl.dev/components/button-group): Segmented buttons — toggle group or clustered actions.
- [Split Button](https://components.dryl.dev/components/split-button): Primary action plus a caret menu of its variants. *(AI-aware)*
- [Menu](https://components.dryl.dev/components/menu): Dropdown menu — placements, icons, shortcuts, danger items.
- [Command Palette](https://components.dryl.dev/components/command-palette): ⌘K launcher — host search with fallback and recent items, declarative commands, inline arguments, AI tool-call resolution. *(AI-aware)*

### Surfaces
- [Card](https://components.dryl.dev/components/cards): Glass surface with optional cursor-tracking spotlight. *(AI-aware)*
- [Dialog](https://components.dryl.dev/components/dialog): Service-driven glass dialog — focus trap, sizes. *(AI-aware)*
- [Toast](https://components.dryl.dev/components/toasts): Service-driven toast stack — auto-dismiss, 6 positions.
- [Chat](https://components.dryl.dev/components/chat): Conversation surface — scrollable log plus pinned composer.
- [Popover](https://components.dryl.dev/components/popover): Anchored floating panel — portals to body, placements.
- [Markdown](https://components.dryl.dev/components/markdown): Renders CommonMark + GFM — fenced code, XSS-safe.
- [Presence](https://components.dryl.dev/components/presence): Animate a child in and out — defers unmount until done.
- [Depth Glass](https://components.dryl.dev/components/depth-glass): Glass that warps in 3D toward the pointer — tilt, parallax.
- [Reconnect Modal](https://components.dryl.dev/components/reconnect-modal): Drop-in replacement for Blazor's reconnect overlay — themed, animated.

### Navigation
- [Breadcrumbs](https://components.dryl.dev/components/breadcrumbs): Hierarchical trail — separators, ellipsis collapse.

### Data
- [Badge](https://components.dryl.dev/components/badges): Neutral · Accent · Success · Warning · Danger, optional dot.
- [Avatar](https://components.dryl.dev/components/avatar): Image → initials → icon fallback; sizes, presence dot.
- [Image](https://components.dryl.dev/components/image): Responsive image — ratios, skeleton, fallback, AI reveal. *(AI-aware)*
- [Table](https://components.dryl.dev/components/tables): Declarative columns — search, sort, filter, animated reorder. *(AI-aware)*
- [Pagination](https://components.dryl.dev/components/pagination): Standalone page navigator with smart-ellipsis range.
- [Calendar](https://components.dryl.dev/components/calendar): Day, week and month views of several people's events, editable.
- [Tree View](https://components.dryl.dev/components/tree): Hierarchical tree — WAI-ARIA keyboard nav, roving tabindex.
- [Timeline](https://components.dryl.dev/components/timeline): Vertical event rail — variants, timestamps, AI step traces. *(AI-aware)*
- [Stat](https://components.dryl.dev/components/stat): KPI card — value that counts up, delta chip, sparkline slot. *(AI-aware)*
- [Sparkline](https://components.dryl.dev/components/sparkline): Inline-SVG trend chart (zero JS) — Line / Area / Bar.
- [Line Chart](https://components.dryl.dev/components/line-chart): Multi-series lines — axes, tooltips, smooth splines. *(AI-aware)*
- [Bar Chart](https://components.dryl.dev/components/bar-chart): Grouped or stacked columns — CSS-only tooltips. *(AI-aware)*
- [Area Chart](https://components.dryl.dev/components/area-chart): Soft gradient fills under multi-series lines. *(AI-aware)*
- [Donut Chart](https://components.dryl.dev/components/donut-chart): Proportions as donut or pie — center KPI slot. *(AI-aware)*
- [Description List](https://components.dryl.dev/components/description-list): Semantic key/value view — Stacked or Inline, columns.
- [Keyboard Key](https://components.dryl.dev/components/kbd): Keyboard-shortcut chips — single key or chord, pure CSS.
- [Code Block](https://components.dryl.dev/components/code-block): Glass code surface — server-side highlighting, copy button. *(AI-aware)*
- [Citation](https://components.dryl.dev/components/citation): Inline [n] source chips with popover — RAG answers.
- [Icons](https://components.dryl.dev/components/icons): Lucide-based line icon set, currentColor stroked.

### Inputs
- [Input Text](https://components.dryl.dev/components/inputs): Form-bound text input — leading/trailing icon slots. *(AI-aware)*
- [Password](https://components.dryl.dev/components/input-password): Password input with show / hide eye toggle.
- [Number](https://components.dryl.dev/components/input-number): Generic numeric input with optional ± stepper. *(AI-aware)*
- [Form Controls](https://components.dryl.dev/components/forms): Textarea, select, checkbox, toggle — EditForm-integrated.
- [Radio Group](https://components.dryl.dev/components/radio): Radio group — vertical or horizontal layout.
- [Segmented Control](https://components.dryl.dev/components/segmented-control): Exclusive view / mode switch — gliding accent indicator.
- [Multi Select](https://components.dryl.dev/components/multiselect): Multi-selection dropdown — removable chips, @bind. *(AI-aware)*
- [Slider](https://components.dryl.dev/components/slider): Range slider — accent gradient fill. *(AI-aware)*
- [File Upload](https://components.dryl.dev/components/file-upload): Drag-and-drop or click-to-browse, multiple files. *(AI-aware)*
- [Autocomplete](https://components.dryl.dev/components/autocomplete): Generic combobox — client SearchFunc or async provider. *(AI-aware)*
- [Date Picker](https://components.dryl.dev/components/datepicker): Calendar panel — keyboard nav, Min/Max, range mode. *(AI-aware)*
- [Time Picker](https://components.dryl.dev/components/timepicker): Time-only picker — scrollable hour/minute, MinuteStep. *(AI-aware)*
- [Chip Input](https://components.dryl.dev/components/chip-input): Free-text tag field — Enter / comma to commit, MaxTags. *(AI-aware)*
- [OTP Input](https://components.dryl.dev/components/otp): Fixed-box OTP entry — auto-advance, paste-to-fill. *(AI-aware)*
- [Input Mask](https://components.dryl.dev/components/input-mask): Masked input — Phone / IBAN / Postal / Card / Custom. *(AI-aware)*
- [Rating](https://components.dryl.dev/components/rating): Star rating — hover preview, AllowClear, keyboard nav. *(AI-aware)*
- [Form Field](https://components.dryl.dev/components/form-field): Label + required + hint + inline validation wrapper.

### Layout
- [Expansion](https://components.dryl.dev/components/expansion): Collapsible disclosure panel with animated chevron.
- [Tabs](https://components.dryl.dev/components/tabs): Tabbed interface — gliding gradient underline. *(AI-aware)*
- [Stepper](https://components.dryl.dev/components/stepper): Multi-step wizard — horizontal or vertical, AI ring. *(AI-aware)*
- [Scroll Area](https://components.dryl.dev/components/scroll-area): Scrollable region with the thin DRYL scrollbar.
- [Reveal](https://components.dryl.dev/components/reveal): Scroll-triggered staggered entrance via IntersectionObserver.
- [Typography](https://components.dryl.dev/components/typography): Type scale primitive — Variant look, As tag, colours.
- [Stack](https://components.dryl.dev/components/stack): Flex layout — direction, gap, align, justify, wrap, collapse.
- [Grid](https://components.dryl.dev/components/grid): Responsive column grid — auto-fit or fixed columns.
- [Container](https://components.dryl.dev/components/container): Centers content at a readable max width with padding.
- [Spacer](https://components.dryl.dev/components/spacer): Flexible or fixed layout spacer.
- [Aspect Ratio](https://components.dryl.dev/components/aspect-ratio): Fixed-ratio box for media and embeds.
- [List](https://components.dryl.dev/components/list): Token-driven list — markers, density, slots, nesting.
- [Divider](https://components.dryl.dev/components/divider): Thin rule — horizontal, labelled or vertical.
- [App Shell](https://components.dryl.dev/components/app-shell): AppBar + Sidebar + Layout — slots, elevation, collapse.
- [Morph](https://components.dryl.dev/components/morph): Shared-element transitions — one ID, overview to detail.
- [Route Transition](https://components.dryl.dev/components/route-transition): Morphs across a real route change; Back button included.

### Feedback
- [Alert](https://components.dryl.dev/components/alerts): Feedback banner — 5 variants, optional title, dismissible. *(AI-aware)*
- [Tooltip](https://components.dryl.dev/components/tooltip): Portalled hover/focus bubble — 4 placements, flips to fit.
- [Spinner](https://components.dryl.dev/components/spinners): Ring / Dots / Pulse — rate adapts to AI state. *(AI-aware)*
- [Skeleton](https://components.dryl.dev/components/skeleton): Placeholder — Streaming shifts shimmer to violet-cyan. *(AI-aware)*
- [Progress](https://components.dryl.dev/components/progress): Linear bar — determinate / indeterminate, percentage. *(AI-aware)*
- [Empty State](https://components.dryl.dev/components/empty-state): No-data placeholder — icon, title, description, action. *(AI-aware)*
- [Error Boundary](https://components.dryl.dev/components/error-boundary): Glass fallback — retry / recover, dev-only detail toggle. *(AI-aware)*
- [Notifications](https://components.dryl.dev/components/notifications): Bell + inbox panel — unread badge, mark-read, AI entries. *(AI-aware)*

### Intelligence
- [AI Mode](https://components.dryl.dev/components/ai): Pulsing status pill adapting label and speed to AiState. *(AI-aware)*
- [AI Activity](https://components.dryl.dev/components/ai-activity): Coordinate AiState across components; bind token streams. *(AI-aware)*
- [Tool Call](https://components.dryl.dev/components/tool-call): Agent tool call — status pill, collapsible JSON args/result. *(AI-aware)*
- [Tool Call Group](https://components.dryl.dev/components/tool-call-group): Collapses many tool calls into one quiet, ticking summary; expandable. *(AI-aware)*
- [Canvas](https://components.dryl.dev/components/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. *(AI-aware)*
- [Canvas Workspace](https://components.dryl.dev/components/canvas-workspace): Named canvas views, exactly one visible; switching morphs. Undo, redo, version history and documents that survive a reload. *(AI-aware)*

### Agents
- [Overview](https://components.dryl.dev/components/agents): The Agent Framework → DRYL bridge — install, concepts, feature map. *(AI-aware)*
- [Agent Run](https://components.dryl.dev/components/agent-run): Wrap a run: automatic AiState + a live tool-call trace, zero manual state. *(AI-aware)*
- [Structured Generation](https://components.dryl.dev/components/structured-generation): DrylAiGenerate — JSON streams straight into live Blazor components. *(AI-aware)*
- [AI Field](https://components.dryl.dev/components/ai-field): DrylAiField — make any input AI-capable in one line, without touching it. *(AI-aware)*
- [Display Tools](https://components.dryl.dev/components/display-tools): Hand the agent charts, stats & timelines — it answers with live components. *(AI-aware)*
- [Human-in-the-Loop](https://components.dryl.dev/components/human-tools): Ready-made dialog AIFunctions — the agent asks the user and waits. *(AI-aware)*
- [AI Canvas](https://components.dryl.dev/components/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. *(AI-aware)*
- [Canvas Dock](https://components.dryl.dev/components/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. *(AI-aware)*
- [Voice](https://components.dryl.dev/components/voice): Speak to your agent — a WebRTC realtime session with the same tools, the same conversation and no audio through your server. *(AI-aware)*
- [Multi-Agent Handoff](https://components.dryl.dev/components/multi-agent): Chain agents into one run — a living handoff timeline with a baton. *(AI-aware)*
- [Collaborative Build](https://components.dryl.dev/components/collaborative-build): StartBuild — agent and user refine a typed artifact round by round. *(AI-aware)*
- [Run Health](https://components.dryl.dev/components/run-health): Error surfacing with retry + token-usage badges from the stream. *(AI-aware)*