Stepwise UI

Command Palette

A searchable ⌘K command menu with grouped items, fuzzy matching, full keyboard navigation, and per-item shortcuts. Binds ⌘K / Ctrl+K by default.

Installation

npx stepwise-ui add command

Demo

…or just press ⌘K anywhere on this page.

import { CommandPalette } from '@/components/stepwise/command'

const groups = [
  { heading: 'Navigation', items: [
    { id: 'home', label: 'Go to Home', icon: <HomeIcon />, shortcut: ['G', 'H'] },
    { id: 'docs', label: 'Go to Docs', keywords: 'guides', shortcut: ['G', 'D'] },
  ]},
  { heading: 'Actions', items: [
    { id: 'new',   label: 'Create new project', shortcut: ['⌘', 'N'], onSelect: create },
    { id: 'theme', label: 'Toggle theme', keywords: 'dark light' },
  ]},
]

// ⌘K / Ctrl+K opens it automatically (hotkey defaults to true)
<CommandPalette open={open} onOpenChange={setOpen} groups={groups} />

Props

PropTypeDescription
groups
CommandGroup[]
Grouped commands, each with an optional heading.
open
boolean
Controlled open state.
onOpenChange
(open: boolean) => void
Fires on open/close.
hotkey
boolean
Bind ⌘K / Ctrl+K to toggle. Default true.
placeholder
string
Search input placeholder.
Each item accepts id, label, icon, keywords (extra search terms), shortcut, and onSelect.