@frame

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

24 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://system.beibeidesign.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://system.beibeidesign.com/r/registry.json

bun bunx shadcn@latest add https://system.beibeidesign.com/r/registry.json

fetch registry curl -s https://system.beibeidesign.com/r/registry.json

Components

24 total

Frame Design System 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

ChatMessage 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

ChatPanel 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

ChatInput 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

MessageCard 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

StatusTag 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 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

SidePanelBody 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

SectionCount 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

TimePill 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

StepIndicator 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

SecondaryButton 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

TertiaryButton component

Bordered action button or native link; links support a white outline tone on media. A React component for AI agent and conversational UI.

npx shadcn@latest add https://system.beibeidesign.com/r/tertiary-button.json

GhostPillButton 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

HeaderIconButton 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

MenuRow 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

IconBadge 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

TextButton 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

UtilityChip 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

SummaryFooter 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

ChoiceCard 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

ReviewItemCard 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

EmptyState 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

VersionRow 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