Navigation & hints
Lucide icon + bold title + optional count badge. Use across shared section headers.
Compact count label for grouped messages, references or workflow steps.
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/section-count.json
The count badge beside a section title. SectionTitle renders it for its `count` prop; import it directly when a surface builds its own heading row (a collapsible section with a chevron, a heading that needs its own semantic level) so the markup is never re-spelled.
Dark hover tooltip — appears above the trigger. Shows on group-hover AND group-focus-within (WCAG 1.4.13).
Icon and explanation for an empty message, result or reference area.
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/empty-state.json
Centered icon + title + optional description. No CTA, no illustration — reads as 'nothing here yet, that's expected'.
Version comparison and update-status presentation without a network or update client.
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/version-row.json
Single row in the Software Update dashboard — component name, current version, latest version, status tag.
WorkPal Agent
0.4.2 → 0.4.3
Wingman
0.0.1
Unknown peer
0.0.0
Notice shown on mobile when a surface depends on the local WorkPal Agent (Mac-only). Two variants: 'card' (inline assistant message) and 'tip' (compact pill near disabled button).
This needs WorkPal Agent on your Mac. Open the page on your computer to use it.
Visual pending, active and completed workflow step marker; pair with a text label.
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/step-indicator.json
Three states: done (check), in-progress (filled dot), pending (empty circle). Used inside TaskProgressCard.