# Navigation & hints > Frame navigation and hint components: NavItem, SectionTitle, Tooltip, EmptyState, VersionRow, AgentRequiredHint and StepIndicator. Web page: https://system.beibeidesign.com/components/navigation/ ### NavItem Master Used in: Wingman 1 · WorkPal 2 Pill-shaped sidebar nav row. Icon + label + optional trailing element. Active state uses .gradient-ring. Overview Library Settings Variant × state matrix (2×2 = 4 cells) | variant ↓ / state → | default | hover | | --- | --- | --- | | inactive | Inactive page | Inactive page | | active | Active page | Active page | ### SidebarSectionToggle Master Used in: Wingman 0 · WorkPal 1 Collapsible sidebar section heading (Pinned / Projects / Recents): title + chevron that turns when collapsed. 44px tap target on mobile, 32px from md up. ## Recents Library Settings ### SectionTitle Master Used in: Wingman 0 · WorkPal 4 Lucide icon + bold title + optional count badge. Use across shared section headers. Needs Your Eyes 3 Agents at Work Big section ### SectionCount Master Used in: Wingman 0 · WorkPal 5 Compact count label for grouped messages, references or workflow steps. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/section-count.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/section-count.json ``` Copy install command Close 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. 1 12 140 ### Tooltip Master Used in: Wingman 4 · WorkPal 1 Dark hover tooltip — appears above the trigger. Shows on group-hover AND group-focus-within (WCAG 1.4.13). ? Hover me Send Send message ### PopoverMenu Master Used in: Wingman 0 · WorkPal 3 The shell for a small menu that pops out of a trigger (DS-159): portaled, placed below or above the anchor, and dismissed by a press outside, Escape (focus back to the trigger), a resize, or a scroll that moves the anchor. Overlay glass + popup shadow, no border. The caller supplies the rows. Opens below Opens above ### EmptyState Master Used in: Wingman 14 · WorkPal 3 Icon and explanation for an empty message, result or reference area. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/empty-state.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/empty-state.json ``` Copy install command Close Centered icon + title + optional description. No CTA, no illustration — reads as 'nothing here yet, that's expected'. No files yet Drop a file or paste a link to get started. ### VersionRow Master Used in: Wingman 0 · WorkPal 2 Version comparison and update-status presentation without a network or update client. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/version-row.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/version-row.json ``` Copy install command Close Single row in the Software Update dashboard — component name, current version, latest version, status tag. WorkPal Agent 0.4.2 → 0.4.3 Update available Wingman 0.0.1 Up to date Unknown peer 0.0.0 ### AgentRequiredHint Master Used in: Wingman 0 · WorkPal 6 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. Open this on your Mac to use Agent tools. ### StepIndicator Master Used in: Wingman 1 · WorkPal 1 Visual pending, active and completed workflow step marker; pair with a text label. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/step-indicator.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/step-indicator.json ``` Copy install command Close Three states: done (check), in-progress (filled dot), pending (empty circle). Used inside TaskProgressCard. Done In progress Pending