Command palette
A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts.
@quill
A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts.
@quill
A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts. Do: Group items into labeled sections (Actions, Recent) so a long list stays scannable. Don't: Dump every possible command into one flat, unlabeled list. Use command when the list is embedded in the page (settings search) or needs groups and behaviour the finished launcher does not have, so you build it from Command parts. Use command-palette for the ready-made ⌘K overlay. Use search-results when search results should live inline on the page, not in a global keyboard-triggered overlay. Use dropdown-menu when the list of options is small and tied to a specific trigger element, not a global searchable launcher.
registry/blocks/command-palette.tsx
import {
Command,
CommandInput,
CommandList,
CommandGroup,
CommandItem,
CommandSeparator,
CommandShortcut,
} from '@/components/ui/command'
import { Icon, type IconName } from '@/components/ui/icon'
const actions: { icon: IconName; label: string; shortcut?: string }[] = [
{ icon: 'add', label: 'New project', shortcut: '⌘N' },
{ icon: 'search', label: 'Search docs' },
{ icon: 'settings', label: 'Open settings', shortcut: '⌘,' },
]
const recent: { icon: IconName; label: string }[] = [
{ icon: 'description', label: 'Design tokens guide' },
{ icon: 'folder_open', label: 'Acme site' },
]
/** A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts. */
export function CommandPalette() {
return (
<Command className="w-[440px] rounded-xl shadow-md ring-1 ring-foreground/10">
<CommandInput placeholder="Type a command or search…" />
<CommandList>
<CommandGroup heading="Actions">
{actions.map((a) => (
<CommandItem key={a.label}>
<Icon name={a.icon} size={16} />
<span>{a.label}</span>
{a.shortcut && <CommandShortcut>{a.shortcut}</CommandShortcut>}
</CommandItem>
))}
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Recent">
{recent.map((r) => (
<CommandItem key={r.label}>
<Icon name={r.icon} size={16} />
<span>{r.label}</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
)
}