Skip to content

Command

A search line and a list that narrows as you type. Groups, shortcuts, and a dialog wrapper.

pulls incmdklucide-react@afterglow/dialog

wire it to⌘K

Command Palette

Search for a command to run...

Installation

npx shadcn@latest add @afterglow/command

Composition

Component structure.

Command
  • CommandInput
  • CommandList
    • CommandEmpty
    • CommandGroup
      • CommandItem
        • CommandShortcut
    • CommandSeparator
CommandDialog

API Reference

Command

The palette itself, laid into a page.

CommandDialog

A dialog shell for a nested Command. title and description are its accessible name, read out rather than drawn, so set them to what the palette searches.

PropTypeDefault
titlestring"Command Palette"
descriptionstring"Search for a command to run..."
initialFocusboolean | RefObject<HTMLElement | null> | function-
showCloseButtonbooleanfalse

Everything else is cmdk's API, documented there.