Default
or press Ctrl + K
CommandPalette
Search every command and run it: Ctrl+K opens, typing filters (with keywords), the count is announced.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Combobox with listbox in a dialog
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Open
The palette is open over this page.
Show the codeHide the code
Open, code
<><p className="text-body-md text-fg">The palette is open over this page.</p><CommandPalette {...args} isOpen /></>Tokens
The 16 design tokens CommandPalette reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 16 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.default | … | --sd-color-icon-default |
| color.text.secondary | … | --sd-color-text-secondary |
| dialog.bg | … | --sd-dialog-bg |
| dialog.fg | … | --sd-dialog-fg |
| dialog.radius | … | --sd-dialog-radius |
| dialog.scrim | … | --sd-dialog-scrim |
| elevation.3 | … | --sd-elevation-3 |
| input.fg | … | --sd-input-fg |
| input.height | … | --sd-input-height |
| input.placeholder | … | --sd-input-placeholder |
| layer.modal | … | --sd-layer-modal |
| listbox.padding | … | --sd-listbox-padding |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.lg | … | --sd-spacing-inset-lg |
| spacing.inset.md | … | --sd-spacing-inset-md |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/command-paletteThen import it
import { CommandPalette } from "@/components/ui/command-palette"Props
| Prop | Type | What it does |
|---|---|---|
commandsrequired | Command[] | |
onActionrequired | (id: string) => void | Called with the command id; the palette closes. |
label | stringDefault 'Command palette' | Name of the dialog and the search field. Default "Command palette". |
placeholder | stringDefault 'Search commands' | |
emptyText | stringDefault 'No commands match' | Text when nothing matches. |
isOpen | boolean | |
onOpenChange | (isOpen: boolean) => void | |
openShortcut | booleanDefault true | Open with Ctrl+K (Cmd+K on Apple) from anywhere on the page. Default true. |
When to use it
Use it for
- Apps with many pages and actions
- Power users who prefer the keyboard
Use something else for
- The only way to reach a page or action: keep navigation visible
- Searching content (documents, people): use a search page
Accessibility
Screen readers announce "Command palette, dialog"; while typing "1 command"; on Down "Go to billing, menu item".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep every command reachable without the palette
Shared patterns it ships with: 3.3.5 (match count announced, empty state).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 75 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 16 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Control+k | Ctrl+K opens the palette with focus in the search field |
| Typing filters the commands and announces the count | |
| ArrowDown | Down highlights the first match (focus stays in the field) |
| Escape | Esc clears the search |
| Escape | A second Esc closes the palette |
In Figma
The Figma component is CommandPalette, with State (Default, Filtered, Empty). The Figma library isn’t published yet.
Figma to code: Placeholder → placeholder; State (Default, Filtered, Empty = emptyText); nested MenuSection → commands[].group; nested MenuItem → commands.