Search and run commands from the keyboard
A modal launcher that searches a grouped command list. Filtering matches labels, descriptions, and hidden keywords, so “changelog” can find a command named “Project Journal”. The arrow keys wrap through results, Enter runs the highlighted command, and ⌘ K toggles the palette from anywhere on the page.
Default
Try the hotkey. This demo owns it here; everywhere else it opens the site’s own palette.
Anatomy
Commands carry an optional icon, a label, a description line, a shortcut array rendered as key chips on the right, and an optional trailing node after the keycaps, a non-interactive badge or mark at the row's right edge (the Beta badge on “New component” in these examples; the site's own palette wears its AI-ring chip there). Disabled commands stay visible for discoverability but are skipped by the keyboard highlight (“Export tokens” in these examples). Group headings are quiet by design; the labels do the work.
Without the hotkey
Set hotkey={false} when the host app already owns ⌘K and wants to open the palette itself.
Empty and loading
Both states replace the list with a single centred status row. Pair loading with onSearchChange and manualFiltering for server-backed search.
Keyboard
↑ ↓ move through results and wrap at the ends · Home and End jump to the first and last · ↵ runs the highlighted command · esc closes. The same hints appear in the palette footer, which hides on narrow screens.
// From the npm package
import { CommandPalette } from 'rift-ds/components/CommandPalette/CommandPalette';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/command-palette.json