---
name: "@frame"
slug: "frame"
description: "React components for AI agent and conversational interfaces, including chat, messages, confirmations, and workflow states."
category: "AI/chat UI"
tags: ["ai", "blocks", "buttons", "cards", "forms", "hooks", "icons", "navigation"]
framework: "react"
license: "MIT"
author: "BeibeiZhang"
website: "https://system.beibeidesign.com"
github: "https://github.com/BeibeiZhang/frame-design-system"
registry: "https://system.beibeidesign.com/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 24
generated_at: "2026-10-17T06:30:14.294Z"
---

# @frame

React components for AI agent and conversational interfaces, including chat, messages, confirmations, and workflow states.

## Links

- Website: https://system.beibeidesign.com
- GitHub: https://github.com/BeibeiZhang/frame-design-system
- Registry JSON: https://system.beibeidesign.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/frame
- This file: https://sh4dcn.vercel.app/md/frame.md

## Install

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

## Components (24)

| name | type | description | install |
| --- | --- | --- | --- |
| frame | registry:component | React components and design foundation for AI agent, chat, message and confirmation interfaces. | `npx shadcn@latest add https://system.beibeidesign.com/r/frame.json` |
| chat-message | registry:component | User and assistant message presentation with a visual streaming state. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/chat-message.json` |
| chat-panel | registry:component | Conversation layout with message and composer slots and near-bottom scrolling. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/chat-panel.json` |
| chat-input | registry:component | Prompt composer with callback-based sending, optional attachments and mentions. No model provider is included. A React component for AI agent and conversationa… | `npx shadcn@latest add https://system.beibeidesign.com/r/chat-input.json` |
| message-card | registry:component | Inline event notice with information, success or warning tone and an optional action slot. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/message-card.json` |
| status-tag | registry:component | Semantic status pill for pending, processing, review and completed states. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/status-tag.json` |
| tag | registry:component | Compact neutral label with an optional outline and tooltip. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/tag.json` |
| side-panel-body | registry:component | Scrollable conversation inspector body with spacing and an automatic scrollbar. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/side-panel-body.json` |
| section-count | registry:component | Compact count label for grouped messages, references or workflow steps. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/section-count.json` |
| time-pill | registry:component | Compact time or effort label using the shared status presentation. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/time-pill.json` |
| step-indicator | registry:component | Visual pending, active and completed workflow step marker; pair with a text label. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/step-indicator.json` |
| secondary-button | registry:component | Secondary action button for prompt or workflow decisions. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/secondary-button.json` |
| tertiary-button | registry:component | Outlined action button for quieter conversation and workflow actions. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/tertiary-button.json` |
| ghost-pill-button | registry:component | Pill-shaped secondary action with optional icon and disabled state. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/ghost-pill-button.json` |
| header-icon-button | registry:component | Named icon action for conversation headers; size the mobile hit area to at least 44 pixels. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/header-icon-button.json` |
| menu-row | registry:component | Workflow or conversation selection row with optional secondary text and current state. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/menu-row.json` |
| icon-badge | registry:component | Decorative icon badge for message context or workflow groups; not an interactive control. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/icon-badge.json` |
| text-button | registry:component | Quiet text action with disabled and disclosure attributes. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/text-button.json` |
| utility-chip | registry:component | Compact context action with optional pressed state for prompt toolbars. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/utility-chip.json` |
| summary-footer | registry:component | Compact elapsed-time or summary line beneath a conversation result. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/summary-footer.json` |
| choice-card | registry:component | Selectable title and description card for choosing a prompt or workflow option. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/choice-card.json` |
| review-item-card | registry:component | Presentational review-result row with type, time and completed state; does not implement a review workflow. A React component for AI agent and conversational U… | `npx shadcn@latest add https://system.beibeidesign.com/r/review-item-card.json` |
| empty-state | registry:component | Icon and explanation for an empty message, result or reference area. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/empty-state.json` |
| version-row | registry:component | Version comparison and update-status presentation without a network or update client. A React component for AI agent and conversational UI. | `npx shadcn@latest add https://system.beibeidesign.com/r/version-row.json` |

## For AI agents

```text
You are adding components from @frame to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/frame.md) for the component list.
2. Fetch the machine-readable index: https://system.beibeidesign.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: frame).
```