Cards
Large centered number with title and subtitle. Used in stat dashboards.
AI-generated summary card. Sparkle icon + body + action buttons.
Your focus time dropped 40% this week. Want me to protect morning blocks?
Clickable card showing current step + elapsed time. Expands to show full step list.
Presentational review-result row with type, time and completed state; does not implement a review workflow.
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.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/review-item-card.json
Passive row with type icon, title and type/time metadata. Enable the chevron only inside a button or link that owns a real action.
Compact row card for an integration. Logo slot + name + Connect / Connected pill (with optional Disconnect dropdown).
Reads the published agreement and sends anything that needs you into Needs You.
Compact file card with icon derived from fileType. Click-to-open via onClick or external link via href.
report.html
deck.pptx
photo.png
Selectable title and description card for choosing a prompt or workflow option.
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.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/choice-card.json
Selectable card with icon + title + description. Radio-style selection — one active at a time.