Agent-legible design system
Components
Start with the free roster, then add finished Pro composition for property inspectors, data grids, docks, command surfaces, node editors, and agent-operations consoles.
Showing 42 of 200 components in patterns
Filtered results
Error Boundary
React error boundary with fallback UI, retry button, and error reporting
Sandbox Viewer
Live preview of sandboxed agent output with terminal, file tree, browser
Agent Chat Panel
Full AI chat with streaming, tool calls, generative UI, file attachments
Auth Flow
Complete sign-in/sign-up/forgot-password flow with social OAuth, MFA
AutoForm
Auto-generated form from Zod schema with all field types
Filterable Data Grid
Data grid with column filters, saved views, export, bulk actions
Node Editor
Visual programming node graph with typed ports, connections, groups
Onboarding Wizard
Multi-step onboarding with progress, validation, skip/back
Agent Config Editor
Agent configuration form with model selection, parameters, tool binding
Agent Cost Tracker
Real-time agent cost monitoring with token usage, spend breakdown, and limits
Agent Execution Trace
Step-by-step agent execution timeline with tool calls, results, and timing
Agent Orchestration
Multi-agent orchestration dashboard with workflow status, agent cards, and metrics
Agent Prompt Editor
Prompt template editor with variables, versioning, and test playground
Agent Run History
Agent execution history table with status, duration, cost, and detail view
Agent Sandbox Terminal
Sandboxed terminal emulator for agent code execution with output streaming
Agent Skill Browser
Browse and manage agent skills/tools with search, categories, and activation
Agent Tool Panel
Tool configuration panel with schema editor, test runner, and output preview
Agent Workflow Builder
Visual workflow builder for agent pipelines with nodes, edges, and conditions
AI Code Editor
Code editor with inline AI suggestions, diff view, accept/reject
AI Writing Editor
Rich text editor with AI suggestions, tone adjustment, expand/compress
Diff Review
Side-by-side and unified diff viewer with line comments and approve/reject
Document Canvas
Block-based document editor with drag-to-reorder, slash commands, and embeds
Entity Picker Modal
Search-and-select entity modal with table view, filtering, multi-select
Generation Stream
Streaming text generation display with typing animation and token counter
Image Canvas
Canvas-based image editor with pan, zoom, annotation tools, and layers
Pivot Table
Interactive pivot table with drag-to-configure rows, columns, values, and aggregations
Skill Activation Panel
Skill toggle panel with categories, descriptions, and activation controls
State Machine Editor
Visual state machine editor with states, transitions, guards, and actions
Tool Definition Editor
JSON schema editor for defining agent tools with parameter types and validation
Virtual Data Grid
Virtualized data grid for 100K+ rows with fixed columns, sorting, and cell editing
Workflow Node Editor
Node-based workflow editor with custom node types, connections, and minimap
Animation Timeline
Keyframe animation timeline with tracks, scrubbing, curve editor
Audit Log
Activity audit trail with filters, export, detail expansion
Checkout Flow
Multi-step checkout with cart, shipping, payment, confirmation
Command Palette
Global Cmd+K palette with actions, navigation, recent, search
Gantt Timeline
Project timeline with tasks, dependencies, milestones, resource view
Infinite Canvas
Pan/zoom canvas with minimap, grid snapping, selection rectangle
Multi-Tenant Switcher
Organization/workspace switcher with create, invite, settings
Notification Center
Full notification system with categories, read/unread, actions
RBAC Admin Panel
Role-based access control with users, roles, permissions matrix
Settings Panel
Multi-tab settings with form groups, profile, billing, notifications
Workflow Builder
Flow-based automation builder (n8n/Zapier style) with node library