Overlay
Command Palette
A searchable command list that opens with ⌘K. Type to filter, move with Up and Down, and run with Enter.
ReactVueWeb Components
View in Storybook Playground
Examples
const [open, setOpen] = useState(false);
<CommandPalette open={open} onOpenChange={setOpen} items={cmds} onSelect={run} />Props
| Name | Type | Default | Description |
|---|---|---|---|
open required | boolean | — | Whether the palette is open. |
onOpenChange required | (open: boolean) => void | — | Called to request open/close (Escape, backdrop, ⌘K). |
items required | CommandItem[] | — | The commands. |
onSelect required | (id: string) => void | — | Called with the chosen command id (the palette then closes). |
placeholder | string | コマンドを検索… | Search field placeholder. @default 'コマンドを検索…' |
emptyText | string | No results | Text when nothing matches. @default 'No results' |
hotkey | boolean | true | Register a global ⌘K / Ctrl+K toggle. @default true |
aria-label | string | Command palette | Accessible label for the dialog. @default 'Command palette' |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.