# uifiles > uifiles is a shadcn/ui registry on Base UI: every shadcn/ui primitive under the @uifiles namespace, AI chat and agent components ported from Vercel AI Elements, and a registry:base item carrying the design tokens. Install with the shadcn CLI; components are copied into your project as source. ## Install - [Design system base](https://www.uifiles.dev/r/base.json): `pnpm dlx shadcn@latest init https://www.uifiles.dev/r/base.json` sets up a project with the uifiles config, tokens and fonts. - [Registry index](https://www.uifiles.dev/r/registry.json): the catalog the shadcn CLI and MCP server read. Add items with `pnpm dlx shadcn@latest add @uifiles/`. - [Skill](https://github.com/jamiethompsondesign/uifiles/tree/main/skills/uifiles): `pnpm dlx skills add jamiethompsondesign/uifiles` gives coding agents the workflow and rules. ## Chat The composer, streamed responses, citations, sources and branching that a conversation is made of. - [Checkpoint](https://www.uifiles.dev/r/checkpoint.json): Inline 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](https://www.uifiles.dev/r/context.json): Context-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](https://www.uifiles.dev/r/inline-citation.json): Inline 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](https://www.uifiles.dev/r/branch.json): Branch 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](https://www.uifiles.dev/r/response.json): Markdown 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](https://www.uifiles.dev/r/model-selector.json): Searchable 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](https://www.uifiles.dev/r/prompt-input.json): Chat 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](https://www.uifiles.dev/r/reasoning.json): Collapsible "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](https://www.uifiles.dev/r/sources.json): Collapsible 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](https://www.uifiles.dev/r/suggestion.json): Horizontally 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 Plans, tasks, tool calls, queues and approvals that show what an agent is doing and let a person step in. - [Chain of Thought](https://www.uifiles.dev/r/chain-of-thought.json): Collapsible 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](https://www.uifiles.dev/r/confirmation.json): Human-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](https://www.uifiles.dev/r/plan.json): Card-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](https://www.uifiles.dev/r/queue.json): Queued 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](https://www.uifiles.dev/r/task.json): Collapsible 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](https://www.uifiles.dev/r/tool.json): Collapsible 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 Highlighted code for chat and agent output. - [Code Block](https://www.uifiles.dev/r/code-block.json): Syntax-highlighted code block for AI chat and agent UIs, rendered with shiki (github-light-high-contrast/github-dark-high-contrast, lazy-loaded per language, token cache, one highlight per snippet). Composes a header with filename/title, a copy-to-clipboard button with a checkmark timeout, a language selector built on Select, optional line numbers, and a body that shows raw text instantly and swaps in highlighted tokens when the highlighter resolves; a block that overflows becomes a keyboard-focusable, labeled scroll container. Use it for model-generated code, tool inputs/outputs, and snippets inside Response or Tool; use CodeBlockContent/CodeBlockContainer to build custom layouts. ## Media Images a model generated. - [Image](https://www.uifiles.dev/r/image.json): Renders an AI-generated image (base64 plus media type from the AI SDK GeneratedFile / experimental_generateImage result) as a responsive, rounded with a data: URL. Use it to display model-generated images in chat messages; alt is required and className passes through. ## Blocks Complete surfaces assembled from the components, installed as pages you then wire to your own route. - [Chat](https://www.uifiles.dev/r/chat.json): AI chat block for AI SDK useChat: a MessageScroller transcript that follows streamed output, an Empty state with one-click Suggestions, user text in Bubbles, assistant parts as Message Response (Streamdown), Reasoning, Tool (tool-* and dynamic-tool) and Attachments, a shimmering Marker while a request is pending, an error row with Retry on failure, and a Prompt Input composer with attachments whose submit button becomes Stop while a response is in flight (given onStop). Ships as a composable Chat component (plus ChatMessages, ChatMessage, ChatMessagePart, ChatToolPart, ChatAttachments, ChatEmpty, ChatThinkingMarker, ChatErrorMarker and ChatComposer exports), a scripted demo conversation built with @shadcn/helpers createChat that streams with no API key, and an app/chat page wiring it up. Use it to start a chatbot, assistant or agent UI, then swap the demo transport for your own route. ## Primitives Every shadcn/ui primitive under the @uifiles namespace, resolved upstream against your style. - [Accordion](https://www.uifiles.dev/r/accordion.json): Collapsible accordion component. Upstream shadcn/ui component, resolved against your style. - [Alert](https://www.uifiles.dev/r/alert.json): Alert component for messages and notifications. Upstream shadcn/ui component, resolved against your style. - [Alert Dialog](https://www.uifiles.dev/r/alert-dialog.json): Alert dialog for confirmation prompts. Upstream shadcn/ui component, resolved against your style. - [Aspect Ratio](https://www.uifiles.dev/r/aspect-ratio.json): Container that maintains aspect ratio. Upstream shadcn/ui component, resolved against your style. - [Attachment](https://www.uifiles.dev/r/attachment.json): File and image attachment display for chat and forms. Upstream shadcn/ui component, resolved against your style. - [Avatar](https://www.uifiles.dev/r/avatar.json): Avatar component for user profiles. Upstream shadcn/ui component, resolved against your style. - [Badge](https://www.uifiles.dev/r/badge.json): Badge component for labels and status indicators. Upstream shadcn/ui component, resolved against your style. - [Breadcrumb](https://www.uifiles.dev/r/breadcrumb.json): Breadcrumb navigation component. Upstream shadcn/ui component, resolved against your style. - [Bubble](https://www.uifiles.dev/r/bubble.json): Chat bubble surface for message content and reactions. Upstream shadcn/ui component, resolved against your style. - [Button](https://www.uifiles.dev/r/button.json): Button component with multiple variants. Upstream shadcn/ui component, resolved against your style. - [Button Group](https://www.uifiles.dev/r/button-group.json): Group multiple buttons together. Upstream shadcn/ui component, resolved against your style. - [Calendar](https://www.uifiles.dev/r/calendar.json): Calendar component for date selection. Upstream shadcn/ui component, resolved against your style. - [Card](https://www.uifiles.dev/r/card.json): Card container component. Upstream shadcn/ui component, resolved against your style. - [Carousel](https://www.uifiles.dev/r/carousel.json): Carousel component using Embla Carousel. Upstream shadcn/ui component, resolved against your style. - [Chart](https://www.uifiles.dev/r/chart.json): Chart components using Recharts. Upstream shadcn/ui component, resolved against your style. - [Checkbox](https://www.uifiles.dev/r/checkbox.json): Checkbox input component. Upstream shadcn/ui component, resolved against your style. - [Collapsible](https://www.uifiles.dev/r/collapsible.json): Collapsible container component. Upstream shadcn/ui component, resolved against your style. - [Combobox](https://www.uifiles.dev/r/combobox.json): Searchable select component with autocomplete. Upstream shadcn/ui component, resolved against your style. - [Command](https://www.uifiles.dev/r/command.json): Command palette component (cmdk). Upstream shadcn/ui component, resolved against your style. - [Context Menu](https://www.uifiles.dev/r/context-menu.json): Right-click context menu. Upstream shadcn/ui component, resolved against your style. - [Dialog](https://www.uifiles.dev/r/dialog.json): Modal dialog component. Upstream shadcn/ui component, resolved against your style. - [Direction](https://www.uifiles.dev/r/direction.json): Text direction provider for RTL support. Upstream shadcn/ui component, resolved against your style. - [Drawer](https://www.uifiles.dev/r/drawer.json): Mobile-friendly drawer component using Vaul. Upstream shadcn/ui component, resolved against your style. - [Dropdown Menu](https://www.uifiles.dev/r/dropdown-menu.json): Dropdown menu component. Upstream shadcn/ui component, resolved against your style. - [Empty](https://www.uifiles.dev/r/empty.json): Empty state component for no data scenarios. Upstream shadcn/ui component, resolved against your style. - [Field](https://www.uifiles.dev/r/field.json): Field component for form inputs with labels and error messages. Upstream shadcn/ui component, resolved against your style. - [Form](https://www.uifiles.dev/r/form.json): Form primitives for react-hook-form. Upstream shadcn/ui component, resolved against your style. - [Hover Card](https://www.uifiles.dev/r/hover-card.json): Card that appears on hover. Upstream shadcn/ui component, resolved against your style. - [Input](https://www.uifiles.dev/r/input.json): Text input component. Upstream shadcn/ui component, resolved against your style. - [Input Group](https://www.uifiles.dev/r/input-group.json): Input component with prefix and suffix addons. Upstream shadcn/ui component, resolved against your style. - [Input OTP](https://www.uifiles.dev/r/input-otp.json): One-time password input component. Upstream shadcn/ui component, resolved against your style. - [Item](https://www.uifiles.dev/r/item.json): Generic item component for lists and menus. Upstream shadcn/ui component, resolved against your style. - [Kbd](https://www.uifiles.dev/r/kbd.json): Keyboard shortcut display component. Upstream shadcn/ui component, resolved against your style. - [Label](https://www.uifiles.dev/r/label.json): Form label component. Upstream shadcn/ui component, resolved against your style. - [Marker](https://www.uifiles.dev/r/marker.json): Inline conversation markers: status updates, system notes, labeled separators. Upstream shadcn/ui component, resolved against your style. - [Menubar](https://www.uifiles.dev/r/menubar.json): Horizontal menubar component. Upstream shadcn/ui component, resolved against your style. - [Message](https://www.uifiles.dev/r/message.json): Chat message row with avatar, header, content and footer slots. Upstream shadcn/ui component, resolved against your style. - [Message Scroller](https://www.uifiles.dev/r/message-scroller.json): Chat transcript container that follows streaming output only while the reader is at the live edge. Upstream shadcn/ui component, resolved against your style. - [Native Select](https://www.uifiles.dev/r/native-select.json): Styled native HTML select element. Upstream shadcn/ui component, resolved against your style. - [Navigation Menu](https://www.uifiles.dev/r/navigation-menu.json): Accessible navigation menu with dropdowns. Upstream shadcn/ui component, resolved against your style. - [Pagination](https://www.uifiles.dev/r/pagination.json): Pagination component for lists and tables. Upstream shadcn/ui component, resolved against your style. - [Popover](https://www.uifiles.dev/r/popover.json): Floating popover component. Upstream shadcn/ui component, resolved against your style. - [Progress](https://www.uifiles.dev/r/progress.json): Progress bar component. Upstream shadcn/ui component, resolved against your style. - [Questionnaire](https://www.uifiles.dev/r/questionnaire.json): Multi-step question flow: single choice, multiple choice, freeform, skippable. Upstream shadcn/ui component, resolved against your style. - [Radio Group](https://www.uifiles.dev/r/radio-group.json): Radio button group component. Upstream shadcn/ui component, resolved against your style. - [Resizable](https://www.uifiles.dev/r/resizable.json): Resizable panel layout component. Upstream shadcn/ui component, resolved against your style. - [Scroll Area](https://www.uifiles.dev/r/scroll-area.json): Custom scrollable area with styled scrollbars. Upstream shadcn/ui component, resolved against your style. - [Select](https://www.uifiles.dev/r/select.json): Select dropdown component. Upstream shadcn/ui component, resolved against your style. - [Separator](https://www.uifiles.dev/r/separator.json): Visual divider between content sections. Upstream shadcn/ui component, resolved against your style. - [Sheet](https://www.uifiles.dev/r/sheet.json): Slide-out panel component (drawer). Upstream shadcn/ui component, resolved against your style. - [Sidebar](https://www.uifiles.dev/r/sidebar.json): Collapsible sidebar component for app layouts. Upstream shadcn/ui component, resolved against your style. - [Skeleton](https://www.uifiles.dev/r/skeleton.json): Skeleton loading placeholder. Upstream shadcn/ui component, resolved against your style. - [Slider](https://www.uifiles.dev/r/slider.json): Slider input component. Upstream shadcn/ui component, resolved against your style. - [Sonner](https://www.uifiles.dev/r/sonner.json): Opinionated toast component for React. Upstream shadcn/ui component, resolved against your style. - [Spinner](https://www.uifiles.dev/r/spinner.json): Loading spinner component. Upstream shadcn/ui component, resolved against your style. - [Switch](https://www.uifiles.dev/r/switch.json): Toggle switch component. Upstream shadcn/ui component, resolved against your style. - [Table](https://www.uifiles.dev/r/table.json): Table component for displaying data. Upstream shadcn/ui component, resolved against your style. - [Tabs](https://www.uifiles.dev/r/tabs.json): Tabbed interface component. Upstream shadcn/ui component, resolved against your style. - [Textarea](https://www.uifiles.dev/r/textarea.json): Multi-line text input component. Upstream shadcn/ui component, resolved against your style. - [Toast](https://www.uifiles.dev/r/toast.json): Toast notification component using Sonner. Upstream shadcn/ui component, resolved against your style. - [Toggle](https://www.uifiles.dev/r/toggle.json): Toggle button component. Upstream shadcn/ui component, resolved against your style. - [Toggle Group](https://www.uifiles.dev/r/toggle-group.json): Group of toggle buttons. Upstream shadcn/ui component, resolved against your style. - [Tooltip](https://www.uifiles.dev/r/tooltip.json): Tooltip component for additional context. Upstream shadcn/ui component, resolved against your style. ## Design system The config, tokens and fonts every item is built on. Run it once with shadcn init. - [uifiles](https://www.uifiles.dev/r/base.json): The uifiles design system: shadcn on Base UI (Nova), the uifiles tokens, Geist type, and project config, with the @uifiles registry registered in components.json. Run `shadcn init https://uifiles.dev/r/base.json` in a new project, then add components.