A header whose search is a command palette: fuzzy matches lit up, a preview of the row you're on, scopes, recent searches, and actions with menus of their own.
When to use
- A header whose search is a command palette: fuzzy matches, a preview of the row you're on, scopes and recent items.
- Apps with many records (customers, invoices, docs) where people jump by name more than they browse.
When not to use
- Apps with a few pages people browse: Dashboard header's ⌘K search is enough.
- Public sites: Website header.
Usage
Command palette header with your own data: every prop has the sample as its default, so pass only what you have.
import { CommandHeader } from "@/components/dashral/blocks/command-header"
<CommandHeader
entries={searchIndex}
onSelect={(entry) => router.push(`/${entry.scope}/${entry.id}`)}
workspaces={workspaces}
workspace={workspaceId}
onWorkspaceChange={setWorkspaceId}
user={user}
>
{page}
</CommandHeader>API reference
CommandHeader
A header whose search is a command palette: pages, people and actions with a fuzzy match that lights the letters it found, a preview of the item you're on, scopes (Tab, or start with / @ >), recent searches, and actions that open a menu of their own — Change accent color recolors the block, Backspace goes back. ⌘K or / opens it, ↑↓ and Enter work it, Esc closes it. Every part comes from props: your pages, people and actions, onSelect to go to or run one, your workspaces and user, and your page under the header as children.
| Prop | Type | Default |
|---|---|---|
entries | CommandEntry[]The pages, people and actions to search; an action with | sample |
onSelect | (entry: CommandEntry) => voidGoes to a page, opens a person or runs an action, once it's picked (the header shows a note without it). | — |
page | stringThe page you're on, by entry id, for the breadcrumb (picked pages set it without it). | — |
workspaces | string[] | sample |
workspace | string | — |
onWorkspaceChange | (workspace: string) => void | — |
onAccentChange | (accent: string) => voidThe accent picked from its menu, after the block recolors itself. | — |
recent | string[]Searches shown before you type. | sample |
user | { name: string; src?: string } | sample |
notifications | numberUnread notifications: a dot on the bell when there are any; none hides the bell. | 1 |
onNotifications | () => void | — |
children | React.ReactNodeYour page under the header (a sample page without it). | — |
type CommandEntry
| Prop | Type | Default |
|---|---|---|
id | string | — |
scope | Exclude<Scope, "all"> | — |
label | string | — |
hint | string | — |
icon | LucideIcon | — |
person | { role: string; email: string; status: "online" | "away" | "offline"; team: string }People: shown in the preview. | — |
page | { path: string; summary: string; updated: string }Pages: shown in the preview. | — |
shortcut | stringActions: a keyboard shortcut, and a menu it opens instead of running. | — |
menu | "accent" | "workspace" | — |