The library
Components
Browse UI controls and AI components. Each component has a live example and usage guide with local sample data.
119 components
UI components
Controls, navigation, layout and rich content for React interfaces.
Actions
Forms
- CalendarChoose a date or range with explicit month, locale and availability rules.
- CheckboxA native checkbox for an explicit choice, including a host-controlled mixed state.
- ComboboxSearch a list and choose one value, with labelled loading and error states.
- DateRangePickerA controlled date range field with a keyboard-accessible calendar popup.
- FieldA shared label, description and validation message around a form control.
- InputA native text input that composes with Field and application validation.
- MultiSelectSearch and select several values without losing choices outside the current results.
- RadioGroupA named group of mutually exclusive native radio choices.
- SelectA custom dropdown with keyboard navigation and themed portals.
- SliderA controlled numeric range with named thumbs and keyboard adjustments.
- SwitchA labelled on/off setting with native focus and switch semantics.
- TextareaA native multiline field for descriptions and longer written content.
Navigation
- BreadcrumbA compact path of real destinations with an explicit current location.
- ContextMenuContextual actions available from pointer and keyboard invocation.
- DropdownMenuAn action menu with managed focus, selection controls and disabled items.
- NavigationMenuWebsite links and disclosed destination groups with native navigation semantics.
- PaginationControlled page navigation for known and unknown totals.
- SidebarVisible navigation groups and native links with current and disabled states.
- TabsSwitch between related views with a controlled selection.
Overlays
Feedback
- AlertA persistent message with semantic tone, optional actions and explicit announcement urgency.
- EmptyStateAn explanation of missing content with an appropriate next action.
- LoadingIndicatorClear activity without invented progress.
- ProgressNamed native progress for a measured amount or an explicitly unknown total.
- SkeletonStable placeholders while real content arrives.
- StatusBadgeA shared language for every operation.
- ToastA controlled temporary notification with dismissal and retained action alternatives.
Data Display
- AccordionProgressive disclosure with consistent focus and icon controls.
- CardA composed content surface with a heading, description, body and footer.
- DataGridA native table with controlled sorting, paging, selection and column visibility.
- TableNative tabular content inside a named, keyboard-scrollable region.
Rich Content
- MarkdownCodeBlockCopyable code with optional safe syntax highlighting, line numbers and plain fallback.
- MarkdownResponseStreaming GFM with headings, lists, tables, code, links and footnotes.
- MathFormulaLaTeX formulas through KaTeX with accessible MathML and bounded parsing.
- MermaidDiagramLazy diagrams with zoom, source view and explicit syntax/security fallbacks.
- RichMarkdownResponseOptional Markdown with inline math, display equations and Mermaid fences.
Layout
- PanelA reusable section surface for related content and actions.
- PanelHeaderA heading, supporting context and adjacent actions for a panel.
- SidecarA controlled inspector that can dock, float or become a modal drawer.
- SplitPaneTwo controlled panes with keyboard resizing and a responsive stacked layout.
- WorkspaceShellNamed header, navigation, content, inspector and footer slots in one responsive workspace.
AI components
Conversation, execution, generated output and review interfaces driven by your host.
Conversation
- AttachmentComposable files, measured progress and accessible media previews.
- BranchSwitcherNavigate explicit conversation branches and their parent versions.
- CheckpointA divider marking a restorable point in a conversation.
- MessageA readable home for each response.
- MessageActionsUseful actions with explicit feedback.
- MessageQueueReview and edit queued drafts with explicit reorder and removal requests.
- OpenInChatOpen the current query in another chat product the host lists.
- PromptInputAn intentional start to every conversation.
- ReasoningA quiet, collapsible public reasoning summary that follows the stream.
- SlashCommandMenuSearch and invoke host-provided slash commands with the keyboard.
- StreamingResponseKeep partial answers visible and honest.
- SuggestionsHelp people find their next question.
- ThreadListSearch, select, rename and archive host-owned conversations.
Voice
- AudioPlayerA compact player for generated or recorded audio.
- PersonaAn animated presence for voice agents.
- TranscriptionA timed transcript that follows playback and can seek.
- VoiceControlMicrophone choice, capture controls, measured level and transcription states.
- VoiceSelectorChoose a speech voice and preview samples.
Tools & execution
- AgentStepsTurn execution into a clear sequence.
- ChainOfThoughtPublic, host-reported steps of a run with sources per step.
- ConnectionStatusConnection and recovery controls with explicit replay capabilities.
- ExecutionTimelineKeep a record of what happened, and when.
- PlanA proposed plan with collapsible steps and a host-owned action.
- RunInspectorInspect public model, tool and agent spans with measured usage.
- ShimmerAnimated text for in-progress labels that respects reduced motion.
- TaskA compact log of what an agent did for one task.
- ToolCallMake inputs, results and failures inspectable.
- ToolGroupSee completion without losing individual failures.
- ToolResultSafe, bounded output with a useful fallback.
- WorkflowFollow stages and their dependencies.
- WorkflowGraphInspect branches, loops and joins as a routed graph, adjacency list or traversal outline.
Review & permissions
Context & memory
Sources & evidence
MCP connections & tools
Agents & governance
Model settings
Forms & generated UI
- AIFormControlled forms with conditional fields, validation and host receipts.
- ChartBounded bar, line and area charts with aligned series, gap semantics and equivalent data.
- ClarificationRequestResolve uncertainty with a focused question.
- DataTableStructured rows with controlled sorting, pagination and card presentation.
- GeneratedUIValidated sections, forms, charts, metrics, tables and host-owned actions.
Coding & artifacts
- ArtifactDiffCompare selected immutable artifact versions with access-aware fallbacks.
- ArtifactPanelA focused place for generated work.
- ArtifactPreviewReadable documents and bounded tables.
- CodeDiffReadable unified and split comparisons with line numbers and explicit limits.
- CommitA commit with its subject, author and changed files.
- EnvironmentVariablesEnvironment variables with masked secret values.
- FileExplorerFolder, detailed-list and directory views with snapshot-bound opening and host windows.
- ImageA generated or attached image with loading and failure states.
- PackageInfoA package change with versions and dependencies.
- SchemaDisplayAn API operation with parameters and nested bodies.
- SnippetA single command with a copy button.
- StackTraceA readable error with internal frames collapsed.
- TerminalOutputBounded process output with selection-aware following and host stop controls.
- TestResultsTest outcomes, timings, diagnostics and file navigation.
- WebPreviewA sandboxed preview of a host page with an address bar.
See the components together in the SaaS admin example, or start with your first component.