Skip to content

Command Palette

Base UI

Grouped commands with a loose filter, run entirely from the keyboard.

Arrows to move, Enter to run, Esc to close

Install

$ npx shadcn@latest add https://spotcheckui.com/r/command-palette.json

Also installs @base-ui/react.

Usage

"use client"

import { useState } from "react"
import { CommandPalette, type CommandGroup } from "@/components/spotcheck/command-palette"

const groups: CommandGroup[] = [
  {
    label: "Actions",
    commands: [
      { id: "new", label: "New eval run", shortcut: "N", onSelect: createRun },
      { id: "export", label: "Export as CSV", keywords: "download", onSelect: exportCsv },
    ],
  },
]

export function App() {
  const [open, setOpen] = useState(false)
  return <CommandPalette groups={groups} open={open} onOpenChange={setOpen} />
}

It matches labels first, then keywords, then letters in order, so "nrn" finds "New eval run". The site's own search on this page is this component. Press ⌘K to try it.

Pass hotkey={false} if something else opens it.

Props

  • groups * RequiredCommandGroup[]Default —The commands, in display order.
  • open * RequiredbooleanDefault —Whether the palette is showing.
  • onOpenChange * Required(open: boolean) => voidDefault —Runs when the palette should open or close.
  • hotkeystring | falseDefault kOpens with Cmd or Ctrl plus this key. Pass false to bind no key.
  • labelstringDefault Command paletteNames the dialog for screen readers.
  • placeholderstringDefault Type a commandText shown in the empty input.

Keyboard

⌘ KOpen or close, Ctrl K on Windows and Linux
↑ ↓Move through the results
EnterRun the highlighted command
EscClose and return focus

Reduced motion

The palette appears without its short slide.