# TUFFUI

> Free, open-source React components for AI-agent interfaces: chats, tool calls, approvals, plans, traces, memory and usage.

Components are React 19 + Tailwind CSS v4 + motion, distributed as a shadcn registry. Installing copies the source into components/ui and adds theme tokens (surface, surface-raised, border-strong, brand, positive, negative, warning) on top of the standard shadcn tokens.

## Docs

- [Installation](https://tuffui.com/docs/installation): shadcn init, theme tokens, the cn helper and motion.
- [Full reference](https://tuffui.com/llms-full.txt): every component with props, usage and types.

## Components

- [Surface](https://tuffui.com/components/surface): Shell, Panel, Inset, IconTile and ShellHeader — the borderless layers every component is framed with. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/surface.json`
- [Action Button](https://tuffui.com/components/action-button): Silver primary, secondary, quiet and danger buttons in two sizes, with icons, loading and icon-only buttons. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/action-button.json`
- [Choice Controls](https://tuffui.com/components/choice-controls): Switch, borderless Checkbox with a mixed state, and a RadioGroup with arrow-key navigation. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/choice-controls.json`
- [Status Pill](https://tuffui.com/components/status-pill): Tinted status pills in five tones with icon or dot, plus a mono Tag for models, branches and transports. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/status-pill.json`
- [Segmented Control](https://tuffui.com/components/segmented-control): Radio-style segmented switch with a sliding active pill that jumps instantly from the keyboard. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/segmented-control.json`
- [Progress Bar](https://tuffui.com/components/progress-bar): Progress and meter bars in five tones with optional stripes, plus a stacked SegmentedBar. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/progress-bar.json`
- [Rolling Number](https://tuffui.com/components/rolling-number): Odometer-style number: each digit rolls to its new value, units and separators stay put. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/rolling-number.json`
- [Text Field](https://tuffui.com/components/text-field): Borderless TextField, SearchField with clear and TextArea, with label, description and error wiring. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/text-field.json`
- [Tooltip](https://tuffui.com/components/tooltip-hint): Hint anchored to its trigger: scales in from the trigger side, opens instantly once one is warm. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/tooltip-hint.json`
- [Action Menu](https://tuffui.com/components/action-menu): Dropdown and right-click menus — items with icons and shortcuts, submenus, checkable items and a destructive group. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/action-menu.json`
- [Popover Panel](https://tuffui.com/components/popover-panel): A panel anchored to its trigger — grows from it, closes on outside click or Esc, keeps focus inside. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/popover-panel.json`
- [Modal Sheet](https://tuffui.com/components/modal-sheet): Centered dialog and edge sheet (drawer) — focus trap, scroll lock, Esc and backdrop to close. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/modal-sheet.json`
- [Toast Stack](https://tuffui.com/components/toast-stack): Notifications that stack, expand on hover, pause while hovered, swipe or click to dismiss, with actions. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/toast-stack.json`
- [Select Field](https://tuffui.com/components/select-field): Select and searchable combobox — options with icons and hints, groups, keyboard typeahead. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/select-field.json`
- [Tab Panels](https://tuffui.com/components/tab-panels): Tabs with panels — sliding indicator, keyboard navigation, lazy panels and counts. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/tab-panels.json`
- [Disclosure](https://tuffui.com/components/disclosure): Accordion and single collapsible sections with smooth height animation. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/disclosure.json`
- [Agent Avatar](https://tuffui.com/components/agent-avatar): Avatars for agents and people — initials or image, presence and activity state, stacked groups. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/agent-avatar.json`
- [Loading Skeleton](https://tuffui.com/components/loading-skeleton): Placeholders for answers, lists and cards while they load. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/loading-skeleton.json`
- [Range Slider](https://tuffui.com/components/range-slider): Single and range sliders with steps, marks and value labels — for temperature, length, budgets. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/range-slider.json`
- [Key Hint](https://tuffui.com/components/key-hint): Keyboard shortcut hints that adapt to the platform — Cmd on Mac, Ctrl elsewhere. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/key-hint.json`
- [Loader](https://tuffui.com/components/loader): Spinner and thinking indicators in a few sizes, with an accessible label. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/loader.json`
- [Empty State](https://tuffui.com/components/empty-state): Empty, no-results and error states with an icon, message and actions. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/empty-state.json`
- [Date Field](https://tuffui.com/components/date-field): Calendar and date picker — month grid, ranges, keyboard navigation and min / max. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/date-field.json`
- [Drop Zone](https://tuffui.com/components/drop-zone): Drag-and-drop file target for a chat — accepts types and size limits, shows why a file was rejected. (Foundations). Install: `npx shadcn@latest add https://tuffui.com/r/drop-zone.json`
- [AI Chat](https://tuffui.com/components/ai-chat): A complete chat app screen — history sidebar, a thread with tool calls, cited answers and feedback, follow-up chips and a composer with a context meter. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/ai-chat.json`
- [Coding Agent](https://tuffui.com/components/coding-agent): An agent working in a repo — chat with plan and permission requests on one side, file changes, terminal and a live preview on the other. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/coding-agent.json`
- [Data Answer](https://tuffui.com/components/data-answer): An analytics question answered with KPI cards, a chart and a table, plus follow-up questions to dig further. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/data-answer.json`
- [Booking Assistant](https://tuffui.com/components/booking-assistant): An assistant that acts — compares options, picks a time, fills a form and confirms before it books. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/booking-assistant.json`
- [Agent Console](https://tuffui.com/components/agent-console): A team view of agents in production — background runs, a trace, eval results, usage and rate limits. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/agent-console.json`
- [Support Widget](https://tuffui.com/components/support-widget): A support bot embedded on a website — launcher bubble, quick replies, order lookup, handoff to a human and a rating at the end. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/support-widget.json`
- [Handoff Inbox](https://tuffui.com/components/handoff-inbox): Where people take over from the bot — escalated conversations by urgency, what the bot already did, reply and hand back. (Screens). Install: `npx shadcn@latest add https://tuffui.com/r/handoff-inbox.json`
- [Streaming Message](https://tuffui.com/components/streaming-message): Assistant message with token streaming, collapsible reasoning, citation chips and copy / retry actions. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/streaming-message.json`
- [Agent Status](https://tuffui.com/components/agent-status): Live activity line for a working agent — current step, rotating detail, elapsed time and a stop action. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/agent-status.json`
- [Message Branches](https://tuffui.com/components/message-branches): Switch between regenerated answers and edited prompts — arrows, a mini branch map, and direction-aware swaps. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/message-branches.json`
- [Response Feedback](https://tuffui.com/components/response-feedback): Thumbs up or down under an answer; a down vote opens reason chips and a note, then settles into a thank-you. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/response-feedback.json`
- [Agent Composer](https://tuffui.com/components/agent-composer): Prompt input with Ask / Plan / Act modes, a context tray with token counts and messages that queue while the agent works. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/agent-composer.json`
- [Agent Question](https://tuffui.com/components/agent-question): Agent asks with choice cards, marks its own suggestion and reason, and accepts a pick, several picks or free text. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/agent-question.json`
- [Tool Approval Queue](https://tuffui.com/components/tool-approval-queue): Triage pending tool calls by risk: select several, grant once, for the session or always, and undo from the resolved log. (Tools & Approvals). Install: `npx shadcn@latest add https://tuffui.com/r/tool-approval-queue.json`
- [Tool Call Block](https://tuffui.com/components/tool-call-block): Inline chat card for a tool call: name, collapsible JSON args, status, duration and a result preview. (Tools & Approvals). Install: `npx shadcn@latest add https://tuffui.com/r/tool-call-block.json`
- [File Changes](https://tuffui.com/components/file-changes): Split review: a file tree on one side, hunks on the other — keep or revert each hunk, then apply the result. (Tools & Approvals). Install: `npx shadcn@latest add https://tuffui.com/r/file-changes.json`
- [Terminal Output](https://tuffui.com/components/terminal-output): Streaming command output with stdout / stderr lines, exit status, duration, copy and stop. (Tools & Approvals). Install: `npx shadcn@latest add https://tuffui.com/r/terminal-output.json`
- [MCP Servers](https://tuffui.com/components/mcp-servers): Connected MCP servers with status, auth prompts and reconnect — expand one to switch individual tools on or off. (Tools & Approvals). Install: `npx shadcn@latest add https://tuffui.com/r/mcp-servers.json`
- [Background Agents Panel](https://tuffui.com/components/background-agents): Agents working in the background as a grid of live tiles or a compact dock that expands into the selected agent. (Planning & Execution). Install: `npx shadcn@latest add https://tuffui.com/r/background-agents.json`
- [Checkpoint Timeline](https://tuffui.com/components/checkpoint-timeline): Checkpoints the agent made along the way — scrub through turns, see what changed, restore to any point. (Planning & Execution). Install: `npx shadcn@latest add https://tuffui.com/r/checkpoint-timeline.json`
- [Run Trace](https://tuffui.com/components/run-trace): Flame graph of an agent run with click-to-zoom spans, plus a breakdown of where time, tokens and cost went. (Observability). Install: `npx shadcn@latest add https://tuffui.com/r/run-trace.json`
- [Eval Results](https://tuffui.com/components/eval-results): An eval run as a grid of cases — pass, fail or regressed vs the baseline — with per-case input, expected and actual. (Observability). Install: `npx shadcn@latest add https://tuffui.com/r/eval-results.json`
- [Context Window Meter](https://tuffui.com/components/context-window-meter): Token usage by segment — system, history, files, tools — with a near-limit warning and a compact action. (Settings & Usage). Install: `npx shadcn@latest add https://tuffui.com/r/context-window-meter.json`
- [Memory Panel](https://tuffui.com/components/memory-panel): What the agent remembers about the user and project — search, scopes, inline edit and forget. (Settings & Usage). Install: `npx shadcn@latest add https://tuffui.com/r/memory-panel.json`
- [Usage Summary](https://tuffui.com/components/usage-summary): Tokens and cost over time, split by model, against a monthly budget. (Settings & Usage). Install: `npx shadcn@latest add https://tuffui.com/r/usage-summary.json`
- [Rate Limits](https://tuffui.com/components/rate-limits): Requests and tokens per minute as refilling buckets, with a retry-after countdown and queued calls when throttled. (Settings & Usage). Install: `npx shadcn@latest add https://tuffui.com/r/rate-limits.json`
- [Chat Thread](https://tuffui.com/components/chat-thread): The conversation itself — user and assistant turns, grouping, date dividers, unread marker and a jump-to-latest pill. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/chat-thread.json`
- [User Message](https://tuffui.com/components/user-message): A sent prompt with attachments, edit-in-place and resend, copy, and a delivery state. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/user-message.json`
- [Conversation List](https://tuffui.com/components/conversation-list): Chat history for a sidebar — search, pinned and dated groups, rename inline, archive and delete with undo. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/conversation-list.json`
- [Prompt Suggestions](https://tuffui.com/components/prompt-suggestions): Starter prompts for an empty chat and follow-up chips under an answer. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/prompt-suggestions.json`
- [Attachment Preview](https://tuffui.com/components/attachment-preview): Images and files attached to a prompt — thumbnails, type and size, upload progress, retry and remove. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/attachment-preview.json`
- [Code Block](https://tuffui.com/components/code-block): Code in an answer — filename, language, line numbers, wrap toggle, copy and collapse for long snippets. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/code-block.json`
- [Source List](https://tuffui.com/components/source-list): Citations behind an answer — numbered footnotes with hover previews and a panel of every source used. (Conversation). Install: `npx shadcn@latest add https://tuffui.com/r/source-list.json`
- [Chart Card](https://tuffui.com/components/chart-card): A chart the agent answers with — bar, line, area or donut, with tooltips, legend toggles and animated data. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/chart-card.json`
- [Dot Histogram](https://tuffui.com/components/dot-histogram): A distribution as stacked dots — every sample visible, median and p95 marked, samples past a limit such as a timeout flagged. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/dot-histogram.json`
- [Tick Gauge](https://tuffui.com/components/tick-gauge): A meter drawn as ticks around an arc, with a target marker and the shortfall to it in red — success rates, SLOs, budgets. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/tick-gauge.json`
- [Mirror Strips](https://tuffui.com/components/mirror-strips): Rows of dot strips with two series mirrored around a line — compare rounds or weeks on one axis, with pinned columns and notes. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/mirror-strips.json`
- [Radial Dots](https://tuffui.com/components/radial-dots): A cycle as rings of dots — hours of the day or days of the week, stacked by series, with the headline in the middle. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/radial-dots.json`
- [Match Field](https://tuffui.com/components/match-field): A fit field — candidates, bots or options placed by score around a centre, grouped into sectors, with threshold rings. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/match-field.json`
- [Radar Chart](https://tuffui.com/components/radar-chart): Scores across several axes as a polygon, with a dashed bar to meet and each member's values as dots on the spokes. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/radar-chart.json`
- [Diverging Bars](https://tuffui.com/components/diverging-bars): Stacked daily columns with one series hanging below zero on its own scale — triaged vs escalated, solved vs handed off. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/diverging-bars.json`
- [Blast Radius](https://tuffui.com/components/blast-radius): What a key, agent or tool can reach, hop by hop around a centre, with the affected paths in red. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/blast-radius.json`
- [Iso Bars](https://tuffui.com/components/iso-bars): Isometric stacked bars in two rows — the main volume behind, rework or failures in front. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/iso-bars.json`
- [Hex Density](https://tuffui.com/components/hex-density): A density map of two measures in hexagons, split by a threshold line — retrieved vs dropped, fast vs slow. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/hex-density.json`
- [Data Table](https://tuffui.com/components/data-table): Tabular results — sortable columns, filter, pagination, row selection and copy as CSV. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/data-table.json`
- [Stat Grid](https://tuffui.com/components/stat-grid): KPI cards with rolling numbers, deltas and sparklines for a quick summary answer. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/stat-grid.json`
- [Form Card](https://tuffui.com/components/form-card): A form the agent asks the user to fill — fields, selects, validation and a submitted state. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/form-card.json`
- [Result Carousel](https://tuffui.com/components/result-carousel): A row of result cards — image, title, meta and an action — with snap scrolling and arrows. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/result-carousel.json`
- [Slot Picker](https://tuffui.com/components/slot-picker): Pick a time the agent proposed — days, free slots, time zone and a confirm step. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/slot-picker.json`
- [Confirmation Card](https://tuffui.com/components/confirmation-card): A summary of what the agent is about to do — line items, totals and confirm or edit before it acts. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/confirmation-card.json`
- [JSON Viewer](https://tuffui.com/components/json-viewer): Structured output as a collapsible tree — types, counts, search, copy path and copy value. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/json-viewer.json`
- [Artifact Panel](https://tuffui.com/components/artifact-panel): A side canvas for what the agent made — live preview and source tabs, version history and download. (Interactive Answers). Install: `npx shadcn@latest add https://tuffui.com/r/artifact-panel.json`