AppBarCommand
v1.0.15Updated 19 Oct 2026Command-first light top bar (Linear / Vercel) — brand, a large centered ⌘K command/search button, and a compact right cluster. Light surface.
Preview
Live · 6 storiesCommand-firstOpen ↗
▸Why this is recommendedheaderappbartopbarcommand+7
AppBarCommand — command first.
Recommended for+14
- ✓Command-palette-driven apps (Linear/Vercel style)
- ✓Minimal light product headers
- ✓Products where search/jump is the main nav
Tags+6
headerappbartopbarcommandsearchshellnavigationlinearvercellightfirst
Features+4
- Large centered ⌘K command/search button as the primary action
- Minimal light bg-background surface with bottom border
- Compact right cluster: notifications, avatar menu
- Data-driven, SSR-safe, keyboard-accessible, className + data-slot passthrough
- Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
Not recommended for−2
- ✕Menu-heavy ERP shells (use AppBar)
- ✕Primary vertical navigation (use Sidebar)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
brandLogo chip + wordmark
—onSearchOpens the command/search palette (⌘K)
—notificationsNotifications bell + count
—userAvatar dropdown menu
—stickyPosition sticky top-0 z-40 (default true)
—linkComponentThe host app link component for the brand block when it carries an href. MCP feedback fb_bf7dc63a.
—