# Cards

> Frame card components for AI products: MetricCard, InsightCard, TaskProgressCard, ReviewItemCard, ConnectorCard, ArtifactCard and ChoiceCard.

Web page: https://system.beibeidesign.com/components/cards/

### MetricCard

Master Used in: Wingman 0 · WorkPal 2

Large centered number with title and subtitle. Used in stat dashboards.

Emotional value

10

/10

Time gained

+2h

this week

API spend

$1.02

under budget

### InsightCard

Master Used in: Wingman 0 · WorkPal 1

AI-generated summary card. Sparkle icon + body + action buttons.

INSIGHT

Your focus time dropped 40% this week. Want me to protect morning blocks?

Yes, protect my mornings Show data

### TaskProgressCard

Master Used in: Wingman 0 · WorkPal 1

Clickable card showing current step + elapsed time. Expands to show full step list.

Analyzing Q2 metrics

Formatting 3m 24s

Drafting press release

Drafting copy 1m 12s

Steps:

Reading brief

Drafting copy

### ReviewItemCard

Master Used in: Wingman 0 · WorkPal 5

Presentational review-result row with type, time and completed state; does not implement a review workflow.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/review-item-card.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/review-item-card.json
```

Copy install command Close

Passive row with type icon, title and type/time metadata. Enable the chevron only inside a button or link that owns a real action.

UX meeting summary — 6 action items

Document · 3 min ago

Weekly stakeholder email draft

Email · 2h ago

Bug triage tickets

Tickets · yesterday

### ConnectorCard

Master Used in: Wingman 0 · WorkPal 4

Compact row card for an integration. Logo slot + name + Connect / Connected pill (with optional Disconnect dropdown).

G

Gmail

Connected

S

Slack Connect

Codex

Reads the published agreement and sends anything that needs you into Needs You.

Connect

### ArtifactCard

Master Used in: Wingman 0 · WorkPal 2

Compact file card with icon derived from fileType. Click-to-open via onClick or external link via href.

report.html

deck.pptx

photo.png

### ChoiceCard

Master Used in: Wingman 5 · WorkPal 0

Selectable title and description card for choosing a prompt or workflow option.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/choice-card.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/choice-card.json
```

Copy install command Close

Selectable card with icon + title + description. Radio-style selection — one active at a time.

Serious Looking for a long-term partner. Dating Open to where it goes. Friends Just here to chat.