Command Palette Open

About this block

Command Palette Open is a static open blueprint of the command palette: a foreground/20 scrim centered on min-h-screen with the palette card at pt-32, a search input reading Type a command or search with an Esc Kbd, then three result groups. Pages lists Dashboard, Deployments (highlighted in bg-muted), and Billing. Actions lists Create new project, Invite member, and Toggle dark mode, each with a KbdGroup shortcut. People lists Priya Nair and Jordan Lee with their acme.com emails and avatar thumbnails. The footer carries the arrow and Enter navigation hints.

Groups and items are three separate const arrays. The highlighted row is a single boolean on one pages item; only ever one row highlighted at a time.

When to use

Reach for this block to show the command palette design in a spec, prototype, or storybook. In production, replace the static markup with a ui/command sheet driven by your navigation manifest and action registry.

A natural flow around it on an Application Pro page:

Before

• Topbar with command hint

After

• Nothing, the palette is a layer above the page

What you can display

One strong use is the full three-group palette. Other configurations:

• Pages only. Drop Actions and People for a lightweight jump-to navigator.
• Actions only. Scoped mode after a slash prefix, showing only contextual commands.
• Empty state. No results row with a plain text message when the query matches nothing.

Tip: Kbd shortcuts in the Actions group only earn their space when they are real bindings, document them in the topbar hint too.