Command Palette

Interactive

A self-written ⌘K command palette (no cmdk): a body-portalled modal that substring/subsequence-filters grouped commands, with wrapping arrow-key navigation, Enter to run, focus trap and return, body-scroll lock, and a spring scale-and-fade entrance. Under prefers-reduced-motion every transition is instant and the ambient brand sheen holds still.

Inspired by cmdk by Paco Coursey (⌘K palette genre) — independently built, not affiliated. Attribution policy

Search commands…⌘K

Press ⌘K to open the palette

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/command-palette.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/command-palette.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex min-h-[280px] w-full items-center justify-center p-6">
    <div className="w-full max-w-sm">
      <div className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-white/50 shadow-[0_12px_40px_-16px_rgba(0,0,0,0.7)]">
        <Search className="size-4 text-white/40" />
        <span className="flex-1">Search commands…</span>
        <span className="flex items-center gap-1">
          <kbd className="rounded border border-white/15 bg-white/5 px-1.5 py-0.5 font-mono text-[11px]">⌘</kbd>
          <kbd className="rounded border border-white/15 bg-white/5 px-1.5 py-0.5 font-mono text-[11px]">K</kbd>
        </span>
      </div>
      <p className="mt-3 text-center text-xs text-white/35">Press ⌘K to open the palette</p>
      <CommandPalette
        groups={[
          {
            heading: "Navigation",
            items: [
              { id: "dashboard", label: "Go to Dashboard", icon: <LayoutDashboard />, shortcut: "G H", keywords: ["home", "start"] },
              { id: "profile", label: "View Profile", icon: <User />, shortcut: "G P", keywords: ["account"] },
            ],
          },
          {
            heading: "Actions",
            items: [
              { id: "new-doc", label: "New Document", icon: <FilePlus />, shortcut: "⌘N", keywords: ["create", "file"] },
              { id: "settings", label: "Open Settings", icon: <Settings />, keywords: ["preferences", "config"] },
              { id: "theme", label: "Toggle Theme", icon: <Moon />, keywords: ["dark", "light", "appearance"] },
            ],
          },
        ]}
      />
    </div>
  </div>

Props

CommandPaletteProps

Prop	Type	Default	Description
groups*	CommandPaletteGroup[]	—	Grouped, filterable commands. Empty groups are hidden automatically.
open	boolean	—	Controlled open state. Pair with `onOpenChange`.
onOpenChange	(open: boolean) => void	—	Fires with the next open state whenever the palette opens or closes.
hotkey	boolean	true	Bind the global ⌘K / Ctrl+K toggle (skipped while typing elsewhere).
placeholder	string	"Search commands…"	Search field placeholder.
emptyMessage	React.ReactNode	"No matching commands"	Shown when nothing matches the query.
accent	string	PB_VIOLET	Accent for the active row, focus ring and sheen. Mirrors `--pb-violet`.
background	string	PB_INK	Surface colour. Mirrors `--pb-ink`.
className	string	—	Extra classes on the dialog surface.

npm dependencies

motion