Overlays

Command

The ⌘K palette — a searchable, keyboard-driven list of everything you can jump to.

Importimport { Command } from "@/components/ui/Command";
Sourcesrc/components/ui/Command

The searchable palette. CommandDialog is the ⌘K form — it is a Dialogwith the scrim and close button removed. This site's own search is built from it; press ⌘K to see it.

Inline

Filtering is yours to implement — the component owns the shell and the keyboard navigation, not the matching. Arrow keys move between items from the input as well as from the list.

No results found.
Pages
Home⌘1
About
Actions
New page
Publish

Props

CommandInput

PropTypeDefaultDescription
onValueChange(value: string) => voidCalled with the query string.
hintReactNodeTrailing slot in the input row — typically an `Esc` chip.

CommandGroup

PropTypeDefaultDescription
headingReactNodeGroup label.
countnumberResult tally shown beside the heading.

CommandItem

PropTypeDefaultDescription
valuestringPassed back to `onSelect`.
disabledbooleanSkipped by keyboard navigation.
onSelect(value?: string) => voidFires on click, Enter or Space.