# Unseen UI

> Controlled React 19 components for AI interfaces and the applications around them: chat, streaming replies, tool calls, approvals with host receipts, runs, sources, generated UI, MCP and trust signals. Published as @stackunseen/ui and @stackunseen/ui-core. No Tailwind required; styles are opt-in CSS files.

Rules the components follow: the host executes and authorises every action; a clicked button is a request until the host answers; unknown outcomes stay unknown; model output is rendered as inert data, never executed.

## Start

- [Getting started](https://unseenui.com/getting-started/): install, the first component, optional entries.
- [Chat](https://unseenui.com/components/chat/): `import { Chat, useLocalHost, useAiSdkChat } from '@stackunseen/ui/chat'`; `<Chat {...useAiSdkChat(useChat())} />` connects the Vercel AI SDK, including tool approvals.
- [Full text for agents](https://unseenui.com/llms-full.txt): every component with its contract, responsibility and example.
- Component docs as Markdown: `https://unseenui.com/llms/<component>.md` (for example [button.md](https://unseenui.com/llms/button.md)) has the usage, props, keyboard behavior and related components. The links below point to them.
- [Design tokens](https://unseenui.com/docs/tokens/): every `--ai-*` CSS variable, what it is for and its light and dark value. Style custom UI with these, not raw colors.
- Machine-readable API: `@stackunseen/ui/manifest.json` in the package lists every export, the props of each component, naming rules and the CSS variables.
- [shadcn registry](https://unseenui.com/r/registry.json): `npx shadcn@latest add https://unseenui.com/r/chat.json` (also chat-ai-sdk and theme) installs @stackunseen/ui and writes a starter file.

## Forms

- [Field](https://unseenui.com/llms/field.md): A shared label, description and validation message around a form control.
- [Input](https://unseenui.com/llms/input.md): A text input that works with Field and your own validation.
- [Textarea](https://unseenui.com/llms/textarea.md): A native multiline field for descriptions and longer written content.
- [Checkbox](https://unseenui.com/llms/checkbox.md): A checkbox, including a mixed state for partly selected groups.
- [Switch](https://unseenui.com/llms/switch.md): An on/off setting with a label.
- [RadioGroup](https://unseenui.com/llms/radio-group.md): A labeled set of options where only one can be picked.
- [TonePad](https://unseenui.com/llms/tone-pad.md): Two choices on one square: drag the handle between Formal and Casual, Brief and Detailed.
- [Slider](https://unseenui.com/llms/slider.md): Pick a number or a range by dragging or with the arrow keys.
- [InputGroup](https://unseenui.com/llms/input-group.md): One bordered control that holds an input and its action.
- [Combobox](https://unseenui.com/llms/combobox.md): Search a list and choose one value, or several with type="multiple", with clear loading and error messages.
- [Calendar](https://unseenui.com/llms/calendar.md): Pick a date or a range, in any language, limited to the dates you allow.
- [DateRangePicker](https://unseenui.com/llms/date-range-picker.md): A date range field with a pop-up calendar that works from the keyboard.
- [Select](https://unseenui.com/llms/select.md): A dropdown for picking one option, with full keyboard support.

## Overlays

- [Popover](https://unseenui.com/llms/popover.md): A small panel that opens from a button and can hold controls.
- [Tooltip](https://unseenui.com/llms/tooltip.md): A short hint that appears on hover and keyboard focus.
- [AlertDialog](https://unseenui.com/llms/alert-dialog.md): A confirmation dialog that stays open until your app confirms the action worked.
- [Modal](https://unseenui.com/llms/modal.md): A dialog, side sheet or full-screen panel for a focused task.

## Navigation

- [DropdownMenu](https://unseenui.com/llms/dropdown-menu.md): A menu of actions behind a button, with checkable and disabled items.
- [ContextMenu](https://unseenui.com/llms/context-menu.md): Actions for an item, opened by right-click or the menu key.
- [NavigationMenu](https://unseenui.com/llms/navigation-menu.md): Website navigation with links and dropdown groups.
- [Breadcrumb](https://unseenui.com/llms/breadcrumb.md): The path to the current page, with links back up.
- [Pagination](https://unseenui.com/llms/pagination.md): Move between pages of results, even when the total isn’t known.
- [Sidebar](https://unseenui.com/llms/sidebar.md): App navigation in groups, marking the current page.
- [Stepper](https://unseenui.com/llms/stepper.md): A step indicator for series and multi-step paths, as dots or a list, with optional links.
- [CommandPalette](https://unseenui.com/llms/command-palette.md): A Ctrl/Cmd+K menu for jumping to places and searching, with results in groups.
- [TableOfContents](https://unseenui.com/llms/table-of-contents.md): An "On this page" rail that marks the section being read.
- [ShareMenu](https://unseenui.com/llms/share-menu.md): Copy link, the device share sheet when there is one, and configurable targets.
- [Tabs](https://unseenui.com/llms/tabs.md): Switch between related views of the same thing.

## Feedback

- [Alert](https://unseenui.com/llms/alert.md): A message that stays on the page, with a tone, optional actions and a choice of how urgently screen readers hear it.
- [EmptyState](https://unseenui.com/llms/empty-state.md): Explains why there’s nothing here and what to do next.
- [Progress](https://unseenui.com/llms/progress.md): Progress as a bar or a ring, for work you can measure or with an honestly unknown total.
- [Toast](https://unseenui.com/llms/toast.md): A short-lived notification people can dismiss, with its action also available elsewhere.
- [LoadingIndicator](https://unseenui.com/llms/loading-indicator.md): Shows that something is happening, without pretending to know how far along it is.
- [Skeleton](https://unseenui.com/llms/skeleton.md): Placeholders that hold space while real content loads.
- [StatusBadge](https://unseenui.com/llms/status-badge.md): A status label with a matching icon and color.

## Data Display

- [Card](https://unseenui.com/llms/card.md): A box with a header (title, description and actions), a body and a footer, or a card that is one big link.
- [Table](https://unseenui.com/llms/table.md): A plain table in a labeled area you can scroll with the keyboard.
- [Tag](https://unseenui.com/llms/tag.md): A neutral label for categories and levels, with tones and two sizes.
- [DiffStat](https://unseenui.com/llms/diff-stat.md): Lines added and removed for a change, with optional file count and blocks.
- [ElapsedTime](https://unseenui.com/llms/elapsed-time.md): Time spent on a run or turn, ticking while it runs and fixed once it ends.
- [Numeric](https://unseenui.com/llms/numeric.md): A figure in the numeric face with its qualifier in words, so numbers line up across a screen.
- [Kbd](https://unseenui.com/llms/kbd.md): One key cap, for shortcut hints beside actions and in menus.
- [DotRing](https://unseenui.com/llms/dot-ring.md): A ring of dotted spokes, one per hour or step, denser where the value is higher, with a figure in the centre.
- [DotBars](https://unseenui.com/llms/dot-bars.md): A histogram built from dots, one column per day or step, with a highlighted range and an accent outlier.
- [WeekStrip](https://unseenui.com/llms/week-strip.md): Seven columns with the series stacked inside each and the current day in bold, for a week at a glance.
- [HeatKeys](https://unseenui.com/llms/heat-keys.md): A grid of cells shaded in four steps by their value, laid out like a keyboard or any grid, with the label kept on every cell.
- [Sparkline](https://unseenui.com/llms/sparkline.md): A word-sized trend for a stat card or a table cell, as a line, an area or bars, with gaps left open.
- [BarList](https://unseenui.com/llms/bar-list.md): Ranked rows with a bar behind each name, for tokens by tool, spend by agent or calls by model.
- [Tracker](https://unseenui.com/llms/tracker.md): A strip of blocks, one per day or run, coloured by how it went, for nightly evals, uptime or a run history.
- [DonutChart](https://unseenui.com/llms/donut-chart.md): Shares of one total as a ring, with the total in the centre and every share printed in the legend.
- [Avatar](https://unseenui.com/llms/avatar.md): An image or initials for a person or team, decorative unless given a name.
- [Stat](https://unseenui.com/llms/stat.md): A formatted number with its label, optional change and note, for rows of metrics.
- [Matrix](https://unseenui.com/llms/matrix.md): A heatmap table of counts with a single-hue fill, linked headers and linked cells.
- [DataGrid](https://unseenui.com/llms/data-grid.md): A table with sorting, paging, row selection and column toggles.
- [Accordion](https://unseenui.com/llms/accordion.md): Sections people can open and close.

## Actions

- [ToggleGroup](https://unseenui.com/llms/toggle-group.md): Choose one or several options shown at once: filter pills with counts, or joined segments, as buttons or links.
- [Chip](https://unseenui.com/llms/chip.md): A compact label that links or can be removed, with a group that wraps or scrolls. For choices, use ToggleGroup.
- [CopyButton](https://unseenui.com/llms/copy-button.md): Copies a value and reports the real outcome.
- [AppearanceToggle](https://unseenui.com/llms/appearance-toggle.md): Lets people choose light, dark or the system setting.
- [Button](https://unseenui.com/llms/button.md): A labeled action in a few sizes and levels of emphasis.
- [IconButton](https://unseenui.com/llms/icon-button.md): An icon-only button with a required label, shown as a hint on hover and focus.

## Conversation

- [Reasoning](https://unseenui.com/llms/reasoning.md): A quiet, collapsible public reasoning summary that follows the stream.
- [SuggestTextarea](https://unseenui.com/llms/suggest-textarea.md): A text area that shows an AI completion as ghost text; Tab accepts it.
- [Checkpoint](https://unseenui.com/llms/checkpoint.md): A divider marking a restorable point in a conversation.
- [SlashCommandMenu](https://unseenui.com/llms/slash-command-menu.md): Find and run your app’s slash commands from the keyboard.
- [ThreadList](https://unseenui.com/llms/thread-list.md): Search, open, rename and archive conversations.
- [BranchSwitcher](https://unseenui.com/llms/branch-switcher.md): Move between versions of a conversation created by edits and retries.
- [MessageQueue](https://unseenui.com/llms/message-queue.md): Review, reorder and remove messages waiting to send.
- [PromptInput](https://unseenui.com/llms/prompt-input.md): The composer for sending a prompt, with attachments, a toolbar and a way to stop.
- [Message](https://unseenui.com/llms/message.md): One user, assistant or system message with its parts and references.
- [MessageActions](https://unseenui.com/llms/message-actions.md): Copy, retry, edit and feedback buttons for a message, each showing whether it worked.
- [StreamingResponse](https://unseenui.com/llms/streaming-response.md): Shows an answer as it streams in, and says clearly if it was cut off or failed.
- [Suggestions](https://unseenui.com/llms/suggestions.md): Follow-up prompts the user can send with one click.
- [FollowUps](https://unseenui.com/llms/follow-ups.md): Short next steps after a response, as chips with a lead word: "Then: Shorter · Add numbers".
- [Attachment](https://unseenui.com/llms/attachment.md): Files attached to a message, with real upload progress and previews.
- [FileDropzone](https://unseenui.com/llms/file-dropzone.md): A drop target for local files with a browse button and type, size and slot checks.
- [FeedbackCapture](https://unseenui.com/llms/feedback-capture.md): Thumbs up or down, reasons and a correction for one specific reply, saved once your server confirms.
- [ChatLauncher](https://unseenui.com/llms/chat-launcher.md): A floating chat bubble for a website that opens a chat panel, full screen on phones.
- [Chat](https://unseenui.com/llms/chat.md): A complete chat: messages, streaming replies, tool cards, suggestions, stop, retry and the composer. Connect it to your server or drive it with props.

## Tools & execution

- [WorkSummary](https://unseenui.com/llms/work-summary.md): The steps of one agent turn, open while it works and collapsed to "Worked for 15s" after.
- [ChainOfThought](https://unseenui.com/llms/chain-of-thought.md): The public steps a run took, each with its sources or files.
- [Plan](https://unseenui.com/llms/plan.md): A proposed plan with collapsible steps and a button to run it.
- [WorkflowGraph](https://unseenui.com/llms/workflow-graph.md): See a workflow’s branches, loops and joins as a graph, a list or an outline.
- [RunInspector](https://unseenui.com/llms/run-inspector.md): Look inside a run: each model, tool and agent step, with measured usage.
- [ConnectionStatus](https://unseenui.com/llms/connection-status.md): Whether you’re connected, with the reconnect and catch-up actions your app supports.
- [AgentSteps](https://unseenui.com/llms/agent-steps.md): The steps of a run in order, with where each one stands, its details and anything it depends on.
- [ExecutionTimeline](https://unseenui.com/llms/execution-timeline.md): A timed record of what happened during a run, as a list, a table or a waterfall with tokens and cost per step.
- [RunBoard](https://unseenui.com/llms/run-board.md): All your runs on one board, grouped by what they need, with live clocks, the newest steps, filters and actions.
- [AgentLanes](https://unseenui.com/llms/agent-lanes.md): Where every agent is right now: a lane per agent on one time axis, with the hand-offs drawn between lanes.
- [AttentionQueue](https://unseenui.com/llms/attention-queue.md): The ordered list of approvals, questions, handoffs and failures waiting on a person.
- [RunSummaryCard](https://unseenui.com/llms/run-summary-card.md): What a run did, for reading afterwards: the goal, the outcome, what it changed and what was left undone.
- [BackgroundStatus](https://unseenui.com/llms/background-status.md): A small persistent indicator for runs still going while the person is elsewhere.
- [RunCompare](https://unseenui.com/llms/run-compare.md): Two runs or checkpoints side by side: outcome, measurements, effects and timelines.
- [SubagentTree](https://unseenui.com/llms/subagent-tree.md): Parent and child runs as a tree with the message that spawned each child, and the cost of each branch.
- [AgentSteering](https://unseenui.com/llms/agent-steering.md): Queue a note for a running agent’s next step without stopping it, and see whether each note was applied.
- [CostLedger](https://unseenui.com/llms/cost-ledger.md): Where the money went, run by run, with measured and estimated costs kept apart and never added together.
- [ToolCall](https://unseenui.com/llms/tool-call.md): A tool request with its input, result, failure and duration.
- [ToolResult](https://unseenui.com/llms/tool-result.md): Tool output, size-limited, with a safe fallback for content it can’t show.
- [ToolGroup](https://unseenui.com/llms/tool-group.md): Several tool calls grouped together, keeping each failure visible.
- [UsageMeter](https://unseenui.com/llms/usage-meter.md): How much context or money has been used, with what the number means. A percentage shows only when there’s a known limit.
- [ContextWindowMeter](https://unseenui.com/llms/context-window-meter.md): How full the model’s context window is and what fills it, drawn to scale from the numbers your server supplies.

## Sources & evidence

- [Sources](https://unseenui.com/llms/sources.md): A "Used N sources" disclosure with safe links.
- [ProvenanceBadge](https://unseenui.com/llms/provenance-badge.md): Where content came from (a model, a tool, a person or an import), marked Signed only when your server verified it.
- [ConfidenceNote](https://unseenui.com/llms/confidence-note.md): A confidence score with what it covers, how it was worked out and when, or nothing at all. Never a bare number.
- [SourceCard](https://unseenui.com/llms/source-card.md): A source behind an answer, with its access state and excerpt.
- [Citation](https://unseenui.com/llms/citation.md): An inline reference that links a passage to its source.
- [EvidenceGroup](https://unseenui.com/llms/evidence-group.md): A claim with the sources that support it.
- [GroundingStatus](https://unseenui.com/llms/grounding-status.md): How well an answer is backed by sources, with what that measure means and its limits.

## Model settings

- [ModelSelector](https://unseenui.com/llms/model-selector.md): A compact model picker: each model with its description, and a check on the current one.
- [ModelControls](https://unseenui.com/llms/model-controls.md): Model capabilities, settings and usage, each showing where the value came from.

## Coding & artifacts

- [CodeTabs](https://unseenui.com/llms/code-tabs.md): A code viewer for the files of one example, with optional numbered tour stops.
- [Snippet](https://unseenui.com/llms/snippet.md): A single command with a copy button.
- [Commit](https://unseenui.com/llms/commit.md): A commit with its subject, author and changed files.
- [EnvironmentVariables](https://unseenui.com/llms/environment-variables.md): Environment variables with masked secret values.
- [PackageInfo](https://unseenui.com/llms/package-info.md): A package change with versions and dependencies.
- [SchemaDisplay](https://unseenui.com/llms/schema-display.md): An API operation with parameters and nested bodies.
- [StackTrace](https://unseenui.com/llms/stack-trace.md): A readable error with internal frames collapsed.
- [WebPreview](https://unseenui.com/llms/web-preview.md): A sandboxed preview of a web page, with an address bar.
- [Image](https://unseenui.com/llms/image.md): A generated or attached image, with what to show while it loads or if it fails.
- [FileExplorer](https://unseenui.com/llms/file-explorer.md): Browse files as folders, a detailed list or a directory tree.
- [CodeDiff](https://unseenui.com/llms/code-diff.md): Code changes, inline or side by side, with line numbers and clear size limits.
- [TerminalOutput](https://unseenui.com/llms/terminal-output.md): Process output that follows new lines (unless you’re selecting text), with a stop button.
- [TestResults](https://unseenui.com/llms/test-results.md): Test outcomes, timings, diagnostics and file navigation.
- [ArtifactDiff](https://unseenui.com/llms/artifact-diff.md): Compare two versions of a document, with a fallback when one can’t be opened.
- [ArtifactPanel](https://unseenui.com/llms/artifact-panel.md): A panel for generated documents and other artifacts.
- [ArtifactPreview](https://unseenui.com/llms/artifact-preview.md): Read-only previews of documents and bounded tables.

## Voice

- [AudioPlayer](https://unseenui.com/llms/audio-player.md): A compact player for generated or recorded audio.
- [Transcription](https://unseenui.com/llms/transcription.md): A timed transcript that follows playback and can seek.
- [VoiceSelector](https://unseenui.com/llms/voice-selector.md): Choose a speech voice and preview samples.
- [Persona](https://unseenui.com/llms/persona.md): An animated presence for voice agents.
- [VoiceControl](https://unseenui.com/llms/voice-control.md): Pick a microphone, record, watch the input level and follow the transcription.

## Layout

- [Sidecar](https://unseenui.com/llms/sidecar.md): A drawer, sheet or inspector panel: docked beside content, floating over it, and a modal drawer or bottom sheet on small screens.
- [SplitPane](https://unseenui.com/llms/split-pane.md): Two panes side by side that you can resize, also from the keyboard, stacking on small screens.
- [WorkspaceShell](https://unseenui.com/llms/workspace-shell.md): A full app frame with header, navigation, content, inspector and footer areas that adapts to screen size.

## Context & memory

- [MentionPicker](https://unseenui.com/llms/mention-picker.md): Type @ to add files, symbols, people or sources.
- [MemoryControls](https://unseenui.com/llms/memory-controls.md): See what the assistant remembers, and ask to correct or delete it.
- [ContextInspector](https://unseenui.com/llms/context-inspector.md): Lists what a request selected, included, excluded or truncated.
- [ContextBar](https://unseenui.com/llms/context-bar.md): What the current request includes, with removable items.
- [MemoryPanel](https://unseenui.com/llms/memory-panel.md): What the assistant remembers, with where each memory came from, how far it reaches and whether it was used just now.

## Review & permissions

- [AccessModeSelector](https://unseenui.com/llms/access-mode-selector.md): Ask for a different access level while keeping current permissions in view.
- [ReviewChanges](https://unseenui.com/llms/review-changes.md): Pick which proposed changes to keep and send one review decision.
- [ApprovalCard](https://unseenui.com/llms/approval-card.md): A review card for approving or rejecting a proposed action.
- [PermissionRequest](https://unseenui.com/llms/permission-request.md): A request for specific access, with its scope and version shown.
- [ScopeGrant](https://unseenui.com/llms/scope-grant.md): Permissions that stay in place, with their scope, expiry, how often they were used, and a way to revoke them.
- [DryRunPreview](https://unseenui.com/llms/dry-run-preview.md): The agent's declared effects before anything runs, with a veto per line and one versioned decision.
- [ApprovalBatch](https://unseenui.com/llms/approval-batch.md): Approve several similar proposals at once, and still leave any of them out.

## Agents & governance

- [AgentHandoff](https://unseenui.com/llms/agent-handoff.md): Hand work from one agent or person to another, with accept and decline.
- [AuditTrail](https://unseenui.com/llms/audit-trail.md): A searchable history of actions and their outcomes, with sensitive fields hidden.
- [PolicyStatus](https://unseenui.com/llms/policy-status.md): Policy check results, with who checked, when, what they covered and which version.
- [AgentCard](https://unseenui.com/llms/agent-card.md): The identity, capabilities and current activity of one agent.

## Forms & generated UI

- [AIForm](https://unseenui.com/llms/ai-form.md): Forms with fields that appear as needed, validation and confirmed submission.
- [GeneratedUI](https://unseenui.com/llms/generated-ui.md): Screens a model describes, such as forms, charts, tables, lists and steps, checked before they render.
- [Chart](https://unseenui.com/llms/chart.md): Bar, line and area charts with a matching data table, and gaps where data is missing.
- [ClarificationRequest](https://unseenui.com/llms/clarification-request.md): A question the assistant asks before it continues.

## Rich Content

- [MarkdownResponse](https://unseenui.com/llms/markdown-response.md): Formatted replies as they stream: headings, lists, tables, code, links and footnotes.
- [MarkdownCodeBlock](https://unseenui.com/llms/markdown-code-block.md): Code with a copy button, optional syntax colors and line numbers.
- [RichMarkdownResponse](https://unseenui.com/llms/rich-markdown-response.md): Markdown that also renders math and Mermaid diagrams.
- [MathFormula](https://unseenui.com/llms/math-formula.md): LaTeX formulas, rendered with KaTeX and readable by screen readers.
- [MermaidDiagram](https://unseenui.com/llms/mermaid-diagram.md): Mermaid diagrams with zoom and a source view, and a clear message when one can’t be drawn.

## MCP connections & tools

- [MCPServerCard](https://unseenui.com/llms/mcp-server-card.md): Whether an MCP server is connected, as your app reports it.
- [MCPToolList](https://unseenui.com/llms/mcp-tool-list.md): The tools an MCP server offers and the permissions they need.
- [MCPAppFrame](https://unseenui.com/llms/mcp-app-frame.md): A sandboxed frame for an MCP App view, talking to your app only through a bridge you control.