The library
Components
Browse UI controls and AI components. Each component has a live example and usage guide with local sample data.
125 components
UI components
Controls, navigation, layout and rich content for React interfaces.
Actions
- ButtonA labelled action with consistent emphasis, size and keyboard behavior.
- IconButtonA compact icon action with a required accessible label and keyboard-visible hint.
- LinkButtonA native link with Button styling, for calls to action that navigate.
- ToggleGroupA row of filter chips with single or multiple selection and host-supplied counts.
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 dropdown with keyboard navigation and a themed menu portal.
- 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.
- LinkCardA plain link presented as a card or row, with icon, title, description and meta.
- 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.
- LoadingIndicatorAn activity indicator that never shows invented progress.
- ProgressNamed native progress for a measured amount or an explicitly unknown total.
- SkeletonPlaceholders that hold space while real content loads.
- StatusBadgeA status label with a consistent icon and tone for each state.
- ToastA controlled temporary notification with dismissal and retained action alternatives.
Data Display
- AccordionCollapsible sections with consistent focus handling and icon controls.
- AvatarAn image or initials for a person or team, decorative unless given a name.
- CardA composed content surface with a heading, description, body and footer.
- DataGridA native table with controlled sorting, paging, selection and column visibility.
- StatA formatted number with its label, optional change and note, for rows of metrics.
- TableNative tabular content inside a named, keyboard-scrollable region.
- TagA neutral label for categories and levels, with tones and two sizes.
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
- AttachmentFile attachments with measured upload progress and accessible media previews.
- BranchSwitcherNavigate explicit conversation branches and their parent versions.
- CheckpointA divider marking a restorable point in a conversation.
- MessageOne user, assistant or system message with its parts and references.
- MessageActionsCopy, retry, edit and feedback actions for a message, with explicit results.
- MessageQueueReview and edit queued drafts with explicit reorder and removal requests.
- OpenInChatOpen the current query in another chat product the host lists.
- PromptInputA composer for sending a prompt, with attachments, a toolbar and a cancel path.
- ReasoningA quiet, collapsible public reasoning summary that follows the stream.
- SlashCommandMenuSearch and invoke host-provided slash commands with the keyboard.
- StreamingResponseRenders an answer as it streams and marks interrupted or failed states.
- SuggestionsFollow-up prompts the user can send with one click.
- 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
- AgentStepsThe steps of a run in order, with their states and details.
- ChainOfThoughtPublic, host-reported steps of a run with sources per step.
- ConnectionStatusShows the connection state and offers the reconnect and replay actions supplied by the host.
- ExecutionTimelineA timed record of what happened during a run.
- 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.
- ToolCallA tool request with its input, result, failure and duration.
- ToolGroupSeveral tool calls grouped together, keeping each failure visible.
- ToolResultBounded tool output with a safe fallback for unsupported content.
- WorkflowThe stages of a workflow and the dependencies between them.
- WorkflowGraphInspect branches, loops and joins as a routed graph, adjacency list or traversal outline.
Review & permissions
- AccessModeSelectorRequest an access mode while keeping confirmed permissions visible.
- ApprovalCardA review card for approving or rejecting a proposed action.
- PermissionRequestA request for specific access, with its scope and version shown.
- ReviewChangesSelect proposed changes and submit a version-bound review decision.
Context & memory
Sources & evidence
- CitationAn inline reference that links a passage to its source.
- EvidenceGroupA claim with the sources that support it.
- GroundingStatusA grounding measure with its definition and limits.
- SourceCardA source behind an answer, with its access state and excerpt.
- SourcesA "Used N sources" disclosure with safe links.
MCP connections & tools
Agents & governance
- AgentCardThe identity, capabilities and current activity of one agent.
- AgentHandoffVersioned ownership transfer with accept, decline and access states.
- AuditTrailSearchable action history with outcomes, correlation and redaction.
- PolicyStatusAttested policy results with their authority, time, scope and version.
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.
- ClarificationRequestA question the assistant asks before it continues.
- 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 panel for generated documents and other artifacts.
- ArtifactPreviewRead-only previews of 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.