KQ-1302 · COMMAND/CENTER

Command Center

A command palette that lives inside its frame: Cmd+K or Ctrl+K, pressed anywhere in the frame, lands it from 8px above on snap over a fading scrim, and it leaves on the exit ease. Commands are a tree — choosing one with sub-commands slides its page in on glide (or raises it over its parent like a sheet) while a chip with the parent's name pops into the field on snap and the list's measured height glides to the new page's; Backspace slides back. Fuzzy matching lights the letters it found across the whole tree, a pill follows the highlight on snap, Recent leads an empty field and a preview pane follows the highlight from 640px; the field is a combobox where arrows move, Enter runs or opens and Escape clears, then goes back, then closes.

KQ-1302 · COMMAND/CENTER

Invoices

Basinworks Billing · 3 open · $18,000.00 outstanding

INV-2041FernworksDue 28 Sep$4,200.00Overdue
INV-2039GaugeworksPaid 30 Sep$1,180.50Paid
INV-2036Coldbrook BankDue 14 Oct$12,940.00Sent
INV-2033Waylight PayNot sent$860.00Draft

palette open · type to search · esc clears, goes back, then closes

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/command-center

Props

commands: CommandItem[]; default defaultCommands; The command tree: each command has a label, group, icon, keywords, shortcut, hint, preview, placeholder and tone, and may hold children that open as a page of their own.
open / defaultOpen: boolean; default false; The palette is open. Controlled or uncontrolled; opening by default never takes focus.
onOpenChange: (open: boolean) => void; default —; Fires from the shortcut, trigger, Escape, scrim or run that opened or closed it.
recent / defaultRecent: string[]; default defaultCommandRecent; Ids of recently run commands, newest first. Controlled or uncontrolled.
onRecentChange: (ids: string[]) => void; default —; Fires with the new list whenever a run changes it.
onRun: (command: CommandItem, path: CommandItem[]) => void; default —; A command was run, with the pages it was reached through.
nesting: "slide" | "stack" | "flat"; default "slide"; How sub-commands open: a page sliding in from the side, a sheet rising over its receding parent, or no pages at all with every sub-command listed under its parent's heading.
preview: boolean; default true; A pane beside the list previews the highlighted command — its facts, a sentence, or the choices it opens — where the frame is 640px or wider.
fuzzy: boolean; default true; Letters match in order anywhere, scored for word starts and runs, and light up. Off: the query must appear as typed.
placeholder: string; default "Search or run a command…"; The field's placeholder on the first page; each sub-page uses its command's own placeholder.
shortcut: boolean; default true; Cmd+K or Ctrl+K, pressed while focus is anywhere in the frame, opens and closes the palette; the key press is consumed there.
trigger: boolean; default true; Show the search trigger along the top of the frame.
triggerLabel: string; default "Search or run a command"; The trigger's text.
maxRecent: number; default 5; How many recent commands are kept.
status: "ready" | "loading" | "error"; default "ready"; Commands still arriving show skeleton rows and a spinner in the field; a failed fetch shows a line with Retry.
onRetry: () => void; default —; The error state's Retry button.
label: string; default "Command menu"; The palette's accessible name.
children: ReactNode; default a Basinworks invoices screen; The app behind the palette, inert while it is open.
sound: boolean; default false; A tick pitched down the list as the highlight moves, a swish as pages and the palette open and close. Typing is silent.
className: string; default —; Classes for the frame. It is 560px tall by default.

Prop	Type	Default	Description
commands	CommandItem[]	defaultCommands	The command tree: each command has a label, group, icon, keywords, shortcut, hint, preview, placeholder and tone, and may hold children that open as a page of their own.
open / defaultOpen	boolean	false	The palette is open. Controlled or uncontrolled; opening by default never takes focus.
onOpenChange	(open: boolean) => void	—	Fires from the shortcut, trigger, Escape, scrim or run that opened or closed it.
recent / defaultRecent	string[]	defaultCommandRecent	Ids of recently run commands, newest first. Controlled or uncontrolled.
onRecentChange	(ids: string[]) => void	—	Fires with the new list whenever a run changes it.
onRun	(command: CommandItem, path: CommandItem[]) => void	—	A command was run, with the pages it was reached through.
nesting	"slide" \| "stack" \| "flat"	"slide"	How sub-commands open: a page sliding in from the side, a sheet rising over its receding parent, or no pages at all with every sub-command listed under its parent's heading.
preview	boolean	true	A pane beside the list previews the highlighted command — its facts, a sentence, or the choices it opens — where the frame is 640px or wider.
fuzzy	boolean	true	Letters match in order anywhere, scored for word starts and runs, and light up. Off: the query must appear as typed.
placeholder	string	"Search or run a command…"	The field's placeholder on the first page; each sub-page uses its command's own placeholder.
shortcut	boolean	true	Cmd+K or Ctrl+K, pressed while focus is anywhere in the frame, opens and closes the palette; the key press is consumed there.
trigger	boolean	true	Show the search trigger along the top of the frame.
triggerLabel	string	"Search or run a command"	The trigger's text.
maxRecent	number	5	How many recent commands are kept.
status	"ready" \| "loading" \| "error"	"ready"	Commands still arriving show skeleton rows and a spinner in the field; a failed fetch shows a line with Retry.
onRetry	() => void	—	The error state's Retry button.
label	string	"Command menu"	The palette's accessible name.
children	ReactNode	a Basinworks invoices screen	The app behind the palette, inert while it is open.
sound	boolean	false	A tick pitched down the list as the highlight moves, a swish as pages and the palette open and close. Typing is silent.
className	string	—	Classes for the frame. It is 560px tall by default.