Browse components
Components
Every component uifiles ships, rendered in each of its states, in light and dark. Open one to try it, copy its install command and see what it installs with.
Chat 10
The composer, streamed responses, citations, sources and branching that a conversation is made of.
- Checkpoint@uifiles/checkpointInline checkpoint marker between chat messages: a bookmark icon, a small ghost button with an optional tooltip, and a separator rule that fills the rest of the row. Use it to let people restore a conversation or agent workspace to an earlier point. Composes shadcn button, tooltip and separator.
- Context@uifiles/contextContext-window usage indicator for AI chat: a ghost button showing percent used with a ring icon that opens a hover card with a progress bar, token counts (input, output, reasoning, cached) and a USD cost estimated by tokenlens from the model id, with reasoning billed as output and cached reads at the cache rate so the rows add up to the total. Use in a chat toolbar or prompt-input footer to show how much of the model's context a conversation has consumed.
- Inline Citation@uifiles/inline-citationInline citation badge for AI-generated text: a hostname pill such as "ai-sdk.dev +2" placed after a passage that opens a source card on hover, keyboard focus or a click/tap, containing a carousel of sources (title, URL, description, quote) with prev/next paging and an index. Use inside streamed responses to attribute claims to web or document sources.
- Message Branch@uifiles/branchBranch switcher for an AI chat message that has several alternative responses (regenerations, forks). MessageBranch holds the current index, MessageBranchContent shows one child branch at a time, and MessageBranchSelector composes MessageBranchPrevious, MessageBranchPage ("2 of 3") and MessageBranchNext in a button-group with wrap-around navigation. Use it inside a message to let users flip between regenerated answers; pairs with @uifiles/response for markdown branches.
- Message Response@uifiles/responseMarkdown renderer for streamed AI assistant output. MessageResponse wraps Streamdown with the cjk, code (Shiki), math (KaTeX) and mermaid plugins, tolerates incomplete markdown while tokens arrive, and is memoized on children/isAnimating so a chat list does not re-render every block on each token. Use it as the body of an assistant message; accepts every Streamdown prop.
- Model Selector@uifiles/model-selectorSearchable model picker for AI chat: a dialog opened from any trigger that hosts a cmdk command palette with a whole-term search input, grouped items, separators, keyboard-shortcut hints, an announced empty state, and decorative provider logos from models.dev or a custom src (ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName). Use to switch the model behind a conversation or prompt input.
- Prompt Input@uifiles/prompt-inputChat composer for AI apps: an auto-growing textarea that submits on Enter (Shift+Enter for newlines), a footer/header tools row, an attachment action menu (add files, take screenshot), model select, hover-card and command-palette slots, and a submit button that turns into a stop button while submitted or streaming when onStop is provided. Handles file attachments via drag-drop, paste, and file dialog with accept/maxFiles/maxFileSize validation, converts blob URLs to data URLs on submit, and can lift its state into an optional PromptInputProvider. Use it as the input at the bottom of any AI SDK useChat conversation. Composes input-group, dropdown-menu, select, tooltip, hover-card, command, spinner.
- Reasoning@uifiles/reasoningCollapsible "thinking" block for AI reasoning/thought tokens. ReasoningTrigger shows a shimmering "Thinking..." while isStreaming, then "Thought for N seconds" (duration measured automatically or passed in); ReasoningContent renders the reasoning text as markdown with Streamdown. Auto-opens when streaming starts and auto-closes one second after it ends; defaultOpen={false} disables the auto-open, a reader's manual toggle is respected, and a controlled parent receives both requests through onOpenChange. Use it above a message response when the model exposes reasoning.
- Sources@uifiles/sourcesCollapsible list of the sources an AI answer cited. Sources wraps a collapsible; SourcesTrigger shows "Used N sources" (singular for one) with a chevron; SourcesContent reveals Source links (book icon + title; absolute URLs open in a new tab). A Source without href renders as plain text. Use under an assistant message to surface citations from web-search or retrieval tool results.
- Suggestion@uifiles/suggestionHorizontally scrolling row of pill-shaped suggestion buttons ("Summarize this repo", "Explain the auth flow") shown under an empty conversation or above the prompt input to give users one-click starting prompts. Suggestions wraps children in a hidden-scrollbar scroll area; Suggestion is an outline button that calls onClick with its suggestion string. Pair with prompt-input to prefill the textarea. Composes button and scroll-area.
Agent 6
Plans, tasks, tool calls, queues and approvals that show what an agent is doing and let a person step in.
- Chain of Thought@uifiles/chain-of-thoughtCollapsible step-by-step trace of an AI agent's reasoning: a header toggle (ChainOfThoughtHeader), then ChainOfThoughtStep rows with icon, label, description and complete/active/pending status, optional ChainOfThoughtSearchResults badges and a ChainOfThoughtImage with caption. Use it to show tool calls, searches and intermediate findings while an agent works; controlled or uncontrolled via open/defaultOpen/onOpenChange.
- Confirmation@uifiles/confirmationHuman-in-the-loop approval prompt for AI tool calls, rendered as an Alert. Reads the tool part's state and approval object and shows exactly one of: the pending request with Approve/Reject action buttons (approval-requested), the accepted outcome (approval-responded, output-available or output-error with approved: true), or the rejected outcome (approval-responded or output-denied with approved: false); renders nothing while input is streaming, before an approval exists, or when a responded part carries no decision. Use it with useChat addToolApprovalResponse for tools that require user consent.
- Plan@uifiles/planCard-shaped, collapsible plan an agent proposes before acting: a header with title, description and a toggle trigger, collapsible content for the steps, and a footer for approve or edit actions. isStreaming renders the title and description with shadcn's shimmer utility while the plan is still being generated. Composes shadcn card, collapsible and button.
- Queue@uifiles/queueQueued work panel for agent chat: collapsible sections with a count label, a scrollable list of items with a status indicator, strike-through completed state, a description line, image and file attachments, and action buttons revealed on hover, keyboard focus, or always on coarse pointers. Use it for pending todos and queued messages beside a prompt input. Composes shadcn collapsible, scroll-area and button; exports QueueTodo, QueueMessage and QueueMessagePart types.
- Task@uifiles/taskCollapsible task log for agent activity: a search-icon trigger with a title and rotating chevron, and an indented list of TaskItem rows with inline TaskItemFile chips for filenames. Use it inside a chat message to show what an agent did in a step, such as files read or searches run. Open by default; composes shadcn collapsible.
- Tool@uifiles/toolCollapsible tool-call card for AI chat: header with wrench icon, tool name derived from the part type (or toolName for dynamic tools), and a status badge for every AI SDK tool state (input-streaming, input-available, approval-requested, approval-responded, output-available, output-denied, output-error); expandable content showing Parameters (input as JSON) and Result or Error (JSON and strings in Code Blocks, React nodes and primitives rendered as given). Use it to render ToolUIPart and DynamicToolUIPart parts from useChat messages.
Code 1
Highlighted code for chat and agent output.
Media 1
Images a model generated.
Blocks 1
Complete surfaces assembled from the components, installed as pages you then wire to your own route.