Shell header

Sticky top application bar that composes a logo slot, optional breadcrumbs, a search input, a command-palette trigger (Cmd+K), and an account-menu slot. Pure layout — no data fetching.

Installation

First install? Complete the one-time host setup.

Live preview

A sticky, data-free top app bar that composes logo, breadcrumbs, search, and account-menu slots. A compact header; try the ⌘K trigger and sidebar toggle.

Built with Button, Input, Separator.

Props

Prop	Type	Default	Description
logo	React.ReactNode	—	Logo or wordmark rendered at the left edge, separated from breadcrumbs by a vertical divider.
breadcrumbsSlot	React.ReactNode	—	Slot for a breadcrumbs component (e.g. `shell-breadcrumbs`). Fills the center-left flex region when `showBreadcrumbs` is true.
accountMenuSlot	React.ReactNode	—	Slot for an account-menu component pinned to the right edge.
showSearch	boolean	false	Render the search input (hidden on small screens via `sm:block`).
showCommandPalette	boolean	true	Render the Cmd+K trigger button.
onCommandPaletteOpen	() => void	—	Fires when the Cmd+K button is clicked or the keyboard shortcut is pressed.
showSidebarToggle	boolean	true	Render the hamburger toggle (visible only below the `lg` breakpoint).
sidebarOpen	boolean	false	Passed as `aria-expanded` on the hamburger — parent owns drawer state.
onSidebarToggle	() => void	—	Fires when the hamburger is clicked; parent updates `sidebarOpen`.
messages	ShellHeaderMessageOverrides	—	Partial override for aria labels, search placeholder, and the command-palette shortcut hint.

Messages

copy

Key	Default copy
headerAriaLabel	Application header
sidebarToggleAriaLabel	Toggle sidebar
commandPaletteAriaLabel	Open command palette
commandPaletteShortcut	⌘K
searchPlaceholder	Search…

errors

Code	Default copy
UNKNOWN_ERROR	Something went wrong. Please try again.