---
name: "@pastaui"
slug: "pastaui"
description: "Open-source React components for AI agent interfaces: conversations, tool calls, approvals, background runs, and rich outputs."
category: "AI/chat UI"
tags: ["accessibility", "ai", "audio", "backgrounds", "blocks", "cards", "forms", "loaders", "media", "navigation", "overlays", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "syeddhasnainn"
website: "https://pastaui.com"
github: "https://github.com/syeddhasnainn/pastaui"
registry: "https://pastaui.com/r/registry.json"
pro: true
pro_url: "https://pro.pastaui.com/"
github_stars: 0
component_count: 54
generated_at: "2026-10-10T06:32:55.998Z"
---

# @pastaui

Open-source React components for AI agent interfaces: conversations, tool calls, approvals, background runs, and rich outputs.

## Links

- Website: https://pastaui.com
- GitHub: https://github.com/syeddhasnainn/pastaui
- Registry JSON: https://pastaui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/pastaui
- This file: https://sh4dcn.vercel.app/md/pastaui.md
- Pro / pricing: https://pro.pastaui.com/

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://pastaui.com/r/registry.json
pnpm dlx shadcn@latest add https://pastaui.com/r/registry.json
bunx shadcn@latest add https://pastaui.com/r/registry.json
# clone the source repo
git clone https://github.com/syeddhasnainn/pastaui.git
# fetch the raw registry index
curl -s https://pastaui.com/r/registry.json
```

## Components (54)

| name | type | description | install |
| --- | --- | --- | --- |
| pastaui-styles | registry:item | Shared card shadow, surface shadow and heading/label utilities used across Pasta UI components. | `npx shadcn@latest add https://pastaui.com/r/pastaui-styles.json` |
| agent-activity | registry:component | A chronological stream for reasoning, searches, terminal work, and tool execution. | `npx shadcn@latest add https://pastaui.com/r/agent-activity.json` |
| agent-status | registry:component | A compact task summary with the current activity and an optional task tray. | `npx shadcn@latest add https://pastaui.com/r/agent-status.json` |
| approval-card | registry:component | A human-in-the-loop decision surface for questions, review steps, and consequential actions. | `npx shadcn@latest add https://pastaui.com/r/approval-card.json` |
| attachments | registry:component | File and image attachments with progress, failure recovery, metadata, and removal actions. | `npx shadcn@latest add https://pastaui.com/r/attachments.json` |
| audio-player | registry:component | A controlled playback surface for speech, generated audio, and recorded tool output. | `npx shadcn@latest add https://pastaui.com/r/audio-player.json` |
| background-inbox | registry:component | Work still running elsewhere and completed results waiting to be collected. | `npx shadcn@latest add https://pastaui.com/r/background-inbox.json` |
| background-runs | registry:component | Ongoing and completed agent jobs collected in one actionable inbox. | `npx shadcn@latest add https://pastaui.com/r/background-runs.json` |
| citations | registry:component | A compact source summary that expands into grounded references with useful context. | `npx shadcn@latest add https://pastaui.com/r/citations.json` |
| code-block | registry:component | A muted code surface with line numbers, focused rows, filename metadata, and copy feedback. | `npx shadcn@latest add https://pastaui.com/r/code-block.json` |
| color-picker | registry:component | A Tailwind palette picker with search, hex and opacity inputs, and optional linear, radial, and conic gradients with draggable stops. | `npx shadcn@latest add https://pastaui.com/r/color-picker.json` |
| commit | registry:component | An expandable changed-file summary with folder groups, line counts, and a diff action. | `npx shadcn@latest add https://pastaui.com/r/commit.json` |
| connection-state | registry:component | Clear connected, reconnecting, resumed, and offline states for resumable agent streams. | `npx shadcn@latest add https://pastaui.com/r/connection-state.json` |
| context-breakdown | registry:component | Where an agent context window went, with token attribution and remaining capacity. | `npx shadcn@latest add https://pastaui.com/r/context-breakdown.json` |
| cost-meter | registry:component | Run cost split by model or task and compared against an optional session budget. | `npx shadcn@latest add https://pastaui.com/r/cost-meter.json` |
| data-table | registry:component | A virtualized, sortable table with resizable columns, a sticky header, and left or right pinned columns for scanning dozens of fields at once. | `npx shadcn@latest add https://pastaui.com/r/data-table.json` |
| document-reference | registry:component | A source card that preserves document identity, location, metadata, and the cited excerpt. | `npx shadcn@latest add https://pastaui.com/r/document-reference.json` |
| edit-message | registry:component | An in-place message editor with cancel and save actions. | `npx shadcn@latest add https://pastaui.com/r/edit-message.json` |
| email-composer | registry:component | A minimal email draft with inline fields, a spacious message, and copy, expand, and send actions. | `npx shadcn@latest add https://pastaui.com/r/email-composer.json` |
| environment-variables | registry:component | A secret-aware configuration surface with masked values and explicit reveal or copy actions. | `npx shadcn@latest add https://pastaui.com/r/environment-variables.json` |
| feedback-dialog | registry:component | A low-friction reason and note form for turning negative feedback into signal. | `npx shadcn@latest add https://pastaui.com/r/feedback-dialog.json` |
| file-diff | registry:component | A compact code-change surface with old and new line numbers plus live change counts. | `npx shadcn@latest add https://pastaui.com/r/file-diff.json` |
| file-tree | registry:component | A compact repository tree with selection, nesting, expansion, and change status. | `npx shadcn@latest add https://pastaui.com/r/file-tree.json` |
| follow-up | registry:component | Compact follow-up prompts that continue the conversation with one click. | `npx shadcn@latest add https://pastaui.com/r/follow-up.json` |
| follow-up-suggestions | registry:component | Contextual next-step prompts that invite a useful continuation after an answer. | `npx shadcn@latest add https://pastaui.com/r/follow-up-suggestions.json` |
| image-generation-loader | registry:component | A streaming image surface with live progress, a playable Snake diversion, and an in-place completed result. | `npx shadcn@latest add https://pastaui.com/r/image-generation-loader.json` |
| inline-citation | registry:component | A numbered reference inside prose with an inspectable source preview. | `npx shadcn@latest add https://pastaui.com/r/inline-citation.json` |
| job-progress | registry:component | A weighted multi-stage progress surface for work measured in minutes rather than seconds. | `npx shadcn@latest add https://pastaui.com/r/job-progress.json` |
| link-preview | registry:component | A horizontal link preview with an image, seller details, and optional product pricing and ratings. | `npx shadcn@latest add https://pastaui.com/r/link-preview.json` |
| memory | registry:component | Visible, removable facts an agent retains about the user or ongoing work. | `npx shadcn@latest add https://pastaui.com/r/memory.json` |
| message-bubble | registry:component | A focused conversational surface with distinct user, assistant, and system treatments. | `npx shadcn@latest add https://pastaui.com/r/message-bubble.json` |
| message-queue | registry:component | Pending user turns that remain visible, removable, and immediately sendable while an agent is busy. | `npx shadcn@latest add https://pastaui.com/r/message-queue.json` |
| message-scroller | registry:component | A compact conversation minimap that navigates user turns while keeping the full thread visible. | `npx shadcn@latest add https://pastaui.com/r/message-scroller.json` |
| model-picker | registry:component | A compact model menu with descriptions, plan badges, effort controls, and additional models. | `npx shadcn@latest add https://pastaui.com/r/model-picker.json` |
| permission-grant | registry:component | A capability-level consent surface that explains reach and duration before access is granted. | `npx shadcn@latest add https://pastaui.com/r/permission-grant.json` |
| plan-approval-card | registry:component | A proposed plan with clear steps and controls to edit, cancel, or start the work. | `npx shadcn@latest add https://pastaui.com/r/plan-approval-card.json` |
| prompt-input | registry:component | An auto-growing agent composer with attachment, model, submit, and stop controls. | `npx shadcn@latest add https://pastaui.com/r/prompt-input.json` |
| quota-banner | registry:component | Usage remaining, reset timing, and an upgrade path without hiding the limit. | `npx shadcn@latest add https://pastaui.com/r/quota-banner.json` |
| reasoning-effort | registry:component | A compact dropdown for choosing how much reasoning power a response should use. | `npx shadcn@latest add https://pastaui.com/r/reasoning-effort.json` |
| reasoning-text | registry:component | A timed reasoning stream that follows the latest thought, then folds into an inspectable duration summary. | `npx shadcn@latest add https://pastaui.com/r/reasoning-text.json` |
| research-report | registry:component | A structured, citation-ready report for research agents and deep-search results. | `npx shadcn@latest add https://pastaui.com/r/research-report.json` |
| retrieval-chunks | registry:component | Ranked source passages that make retrieval-augmented answers inspectable. | `npx shadcn@latest add https://pastaui.com/r/retrieval-chunks.json` |
| schedule-card | registry:component | A recurring agent job with human-readable timing, next run, and pause controls. | `npx shadcn@latest add https://pastaui.com/r/schedule-card.json` |
| search-results-tabs | registry:component | Ranked search results with site icons, titles, source URLs, and plain text category tabs. | `npx shadcn@latest add https://pastaui.com/r/search-results-tabs.json` |
| task-card | registry:component | One delegated task with state, timing, assigned agent, and returned result. | `npx shadcn@latest add https://pastaui.com/r/task-card.json` |
| thinking-shimmer | registry:component | A quiet live status that keeps the agent current action readable while work continues. | `npx shadcn@latest add https://pastaui.com/r/thinking-shimmer.json` |
| todo-list | registry:component | A live agent plan with completion counts, task states, and expandable detail. | `npx shadcn@latest add https://pastaui.com/r/todo-list.json` |
| tool-approval | registry:component | A permission gate that shows scope and command detail before an agent tool runs. | `npx shadcn@latest add https://pastaui.com/r/tool-approval.json` |
| tool-error | registry:component | A recoverable connection failure with a clear explanation and compact recovery actions. | `npx shadcn@latest add https://pastaui.com/r/tool-error.json` |
| tool-group | registry:component | Consecutive tool calls collapsed into one readable execution group. | `npx shadcn@latest add https://pastaui.com/r/tool-group.json` |
| tool-result | registry:component | An execution disclosure for running, successful, or failed tools with optional raw output. | `npx shadcn@latest add https://pastaui.com/r/tool-result.json` |
| tool-timeline | registry:component | A compact narrative of the verbs, targets, state, and timing in an agent run. | `npx shadcn@latest add https://pastaui.com/r/tool-timeline.json` |
| video-player | registry:component | A compact video result with controllable playback, seek position, and metadata. | `npx shadcn@latest add https://pastaui.com/r/video-player.json` |
| voice-input | registry:component | A tactile recording control with a recessed waveform, red playhead, and pause control. | `npx shadcn@latest add https://pastaui.com/r/voice-input.json` |

## For AI agents

```text
You are adding components from @pastaui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/pastaui.md) for the component list.
2. Fetch the machine-readable index: https://pastaui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: pastaui).
```