- Base UI
- shadcn 4
- Tailwind v4
- React 19
- Next 16
uifiles
A shadcn/ui registry on Base UI. Every shadcn primitive under one namespace, AI chat and agent components ported from Vercel AI Elements, and the tokens that tie them together. Components are files copied into your project, not a dependency.
pnpm dlx shadcn@latest init https://www.uifiles.dev/r/base.json
pnpm dlx shadcn@latest add @uifiles/button
Chat10
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.
Agent6
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.
Code1
Highlighted code for chat and agent output.
Media1
Images a model generated.
Blocks1
Complete surfaces assembled from the components, installed as pages you then wire to your own route.
Primitives63
Every shadcn/ui primitive under the @uifiles namespace, resolved upstream against your style. Each links to its shadcn/ui documentation.
Buttons & inputs19
- Button@uifiles/buttonButton component with multiple variants. Upstream shadcn/ui component, resolved against your style.
- Button Group@uifiles/button-groupGroup multiple buttons together. Upstream shadcn/ui component, resolved against your style.
- Toggle@uifiles/toggleToggle button component. Upstream shadcn/ui component, resolved against your style.
- Toggle Group@uifiles/toggle-groupGroup of toggle buttons. Upstream shadcn/ui component, resolved against your style.
- Input@uifiles/inputText input component. Upstream shadcn/ui component, resolved against your style.
- Input Group@uifiles/input-groupInput component with prefix and suffix addons. Upstream shadcn/ui component, resolved against your style.
- Input OTP@uifiles/input-otpOne-time password input component. Upstream shadcn/ui component, resolved against your style.
- Textarea@uifiles/textareaMulti-line text input component. Upstream shadcn/ui component, resolved against your style.
- Checkbox@uifiles/checkboxCheckbox input component. Upstream shadcn/ui component, resolved against your style.
- Radio Group@uifiles/radio-groupRadio button group component. Upstream shadcn/ui component, resolved against your style.
- Switch@uifiles/switchToggle switch component. Upstream shadcn/ui component, resolved against your style.
- Slider@uifiles/sliderSlider input component. Upstream shadcn/ui component, resolved against your style.
- Select@uifiles/selectSelect dropdown component. Upstream shadcn/ui component, resolved against your style.
- Native Select@uifiles/native-selectStyled native HTML select element. Upstream shadcn/ui component, resolved against your style.
- Combobox@uifiles/comboboxSearchable select component with autocomplete. Upstream shadcn/ui component, resolved against your style.
- Calendar@uifiles/calendarCalendar component for date selection. Upstream shadcn/ui component, resolved against your style.
- Field@uifiles/fieldField component for form inputs with labels and error messages. Upstream shadcn/ui component, resolved against your style.
- Form@uifiles/formForm primitives for react-hook-form. Upstream shadcn/ui component, resolved against your style.
- Label@uifiles/labelForm label component. Upstream shadcn/ui component, resolved against your style.
Overlays & menus11
- Dialog@uifiles/dialogModal dialog component. Upstream shadcn/ui component, resolved against your style.
- Alert Dialog@uifiles/alert-dialogAlert dialog for confirmation prompts. Upstream shadcn/ui component, resolved against your style.
- Sheet@uifiles/sheetSlide-out panel component (drawer). Upstream shadcn/ui component, resolved against your style.
- Drawer@uifiles/drawerMobile-friendly drawer component using Vaul. Upstream shadcn/ui component, resolved against your style.
- Popover@uifiles/popoverFloating popover component. Upstream shadcn/ui component, resolved against your style.
- Hover Card@uifiles/hover-cardCard that appears on hover. Upstream shadcn/ui component, resolved against your style.
- Tooltip@uifiles/tooltipTooltip component for additional context. Upstream shadcn/ui component, resolved against your style.
- Dropdown Menu@uifiles/dropdown-menuDropdown menu component. Upstream shadcn/ui component, resolved against your style.
- Context Menu@uifiles/context-menuRight-click context menu. Upstream shadcn/ui component, resolved against your style.
- Menubar@uifiles/menubarHorizontal menubar component. Upstream shadcn/ui component, resolved against your style.
- Command@uifiles/commandCommand palette component (cmdk). Upstream shadcn/ui component, resolved against your style.
Navigation5
- Breadcrumb@uifiles/breadcrumbBreadcrumb navigation component. Upstream shadcn/ui component, resolved against your style.
- Navigation Menu@uifiles/navigation-menuAccessible navigation menu with dropdowns. Upstream shadcn/ui component, resolved against your style.
- Pagination@uifiles/paginationPagination component for lists and tables. Upstream shadcn/ui component, resolved against your style.
- Sidebar@uifiles/sidebarCollapsible sidebar component for app layouts. Upstream shadcn/ui component, resolved against your style.
- Tabs@uifiles/tabsTabbed interface component. Upstream shadcn/ui component, resolved against your style.
Layout8
- Accordion@uifiles/accordionCollapsible accordion component. Upstream shadcn/ui component, resolved against your style.
- Aspect Ratio@uifiles/aspect-ratioContainer that maintains aspect ratio. Upstream shadcn/ui component, resolved against your style.
- Card@uifiles/cardCard container component. Upstream shadcn/ui component, resolved against your style.
- Collapsible@uifiles/collapsibleCollapsible container component. Upstream shadcn/ui component, resolved against your style.
- Item@uifiles/itemGeneric item component for lists and menus. Upstream shadcn/ui component, resolved against your style.
- Resizable@uifiles/resizableResizable panel layout component. Upstream shadcn/ui component, resolved against your style.
- Scroll Area@uifiles/scroll-areaCustom scrollable area with styled scrollbars. Upstream shadcn/ui component, resolved against your style.
- Separator@uifiles/separatorVisual divider between content sections. Upstream shadcn/ui component, resolved against your style.
Data display6
- Avatar@uifiles/avatarAvatar component for user profiles. Upstream shadcn/ui component, resolved against your style.
- Badge@uifiles/badgeBadge component for labels and status indicators. Upstream shadcn/ui component, resolved against your style.
- Carousel@uifiles/carouselCarousel component using Embla Carousel. Upstream shadcn/ui component, resolved against your style.
- Chart@uifiles/chartChart components using Recharts. Upstream shadcn/ui component, resolved against your style.
- Kbd@uifiles/kbdKeyboard shortcut display component. Upstream shadcn/ui component, resolved against your style.
- Table@uifiles/tableTable component for displaying data. Upstream shadcn/ui component, resolved against your style.
Feedback7
- Alert@uifiles/alertAlert component for messages and notifications. Upstream shadcn/ui component, resolved against your style.
- Empty@uifiles/emptyEmpty state component for no data scenarios. Upstream shadcn/ui component, resolved against your style.
- Progress@uifiles/progressProgress bar component. Upstream shadcn/ui component, resolved against your style.
- Skeleton@uifiles/skeletonSkeleton loading placeholder. Upstream shadcn/ui component, resolved against your style.
- Spinner@uifiles/spinnerLoading spinner component. Upstream shadcn/ui component, resolved against your style.
- Sonner@uifiles/sonnerOpinionated toast component for React. Upstream shadcn/ui component, resolved against your style.
- Toast@uifiles/toastToast notification component using Sonner. Upstream shadcn/ui component, resolved against your style.
Chat6
- Message@uifiles/messageChat message row with avatar, header, content and footer slots. Upstream shadcn/ui component, resolved against your style.
- Message Scroller@uifiles/message-scrollerChat transcript container that follows streaming output only while the reader is at the live edge. Upstream shadcn/ui component, resolved against your style.
- Bubble@uifiles/bubbleChat bubble surface for message content and reactions. Upstream shadcn/ui component, resolved against your style.
- Attachment@uifiles/attachmentFile and image attachment display for chat and forms. Upstream shadcn/ui component, resolved against your style.
- Marker@uifiles/markerInline conversation markers: status updates, system notes, labeled separators. Upstream shadcn/ui component, resolved against your style.
- Questionnaire@uifiles/questionnaireMulti-step question flow: single choice, multiple choice, freeform, skippable. 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@uifiles/base
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.
pnpm dlx shadcn@latest init https://www.uifiles.dev/r/base.json