Command

A fast, composable command menu. The highlight glides between results and the list height eases as you filter.

Overlayscmdk

Playground

Tweak the props, the preview and the code follow.

Props

placeholder

shortcuts

icons

loop

<Command loop>
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem><Calendar /> Calendar</CommandItem>
      <CommandItem><Smile /> Search emoji</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <User /> Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Installation

npx @plumsydev/plum-ui add command

Also pulls in dialog automatically.

Usage

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

<Command>
  <CommandInput placeholder="Search…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>
        Settings <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Command palette

CommandDialog wraps the menu in a dialog anchored near the top of the screen. Try ⌘J.

Nested pages

Drill into sub-pages with breadcrumbs. Backspace on an empty input goes back.

Home

↵ select↑↓ navigate

API Reference

Command

Prop	Type	Default
`value` Controlled selected item value.	`string`	`—`
`onValueChange` Called when the highlighted item changes.	`(value: string) => void`	`—`
`shouldFilter` Set to false to filter items yourself (e.g. async search).	`boolean`	`true`
`loop` Wrap keyboard navigation from last to first item.	`boolean`	`false`

CommandDialog

Accepts every Dialog root prop.

Prop	Type	Default
`title` Accessible title, visually hidden.	`string`	`"Command palette"`
`description` Accessible description, visually hidden.	`string`	`—`
`showCloseButton` Show the dialog close button.	`boolean`	`false`

CommandItem

Prop	Type	Default
`value` Value used for filtering. Defaults to the text content.	`string`	`—`
`keywords` Extra search terms that match this item.	`string[]`	`—`
`onSelect` Called on click or Enter.	`(value: string) => void`	`—`
`disabled` Make the item unselectable.	`boolean`	`false`

Notes

Bind the palette to a global shortcut with a keydown listener on document — see the dialog example.

PreviousCombobox NextContext Menu