Command

<>
<Button size="sm" onClick={() => setOpen(true)}>
  Open command
</Button>
<CommandDialog
  open={open}
  onOpenChange={setOpen}
  items={actions}
  itemToStringValue={(action) => action.label}
  title="Workspace command palette"
>
  <CommandInput placeholder="Search actions..." />
  <CommandList>
    <CommandGroup heading="Actions">
      <CommandCollection>
        {(action) => (
          <CommandItem
            key={action.value}
            value={action}
            label={action.label}
            icon={action.icon}
            onClick={() => setOpen(false)}
          >
            <MenuItemAction className="flex items-center gap-2 text-xs text-muted">
              <span>{action.section}</span>
              <span>{action.shortcut}</span>
            </MenuItemAction>
          </CommandItem>
        )}
      </CommandCollection>
    </CommandGroup>
    <CommandEmpty>No commands found.</CommandEmpty>
  </CommandList>
</CommandDialog>
</>

<><Button size="sm" onClick={() => setOpen(true)}>  Open command</Button><CommandDialog  open={open}  onOpenChange={setOpen}  items={actions}  itemToStringValue={(action) => action.label}  title="Workspace command palette">  <CommandInput placeholder="Search actions..." />  <CommandList>    <CommandGroup heading="Actions">      <CommandCollection>        {(action) => (          <CommandItem            key={action.value}            value={action}            label={action.label}            icon={action.icon}            onClick={() => setOpen(false)}          >            <MenuItemAction className="flex items-center gap-2 text-xs text-muted">              <span>{action.section}</span>              <span>{action.shortcut}</span>            </MenuItemAction>          </CommandItem>        )}      </CommandCollection>    </CommandGroup>    <CommandEmpty>No commands found.</CommandEmpty>  </CommandList></CommandDialog></>

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Anatomy

<CommandDialog>
  <CommandInput />
  <CommandList>
    <CommandGroup>
      <CommandCollection>
        <CommandItem />
      </CommandCollection>
    </CommandGroup>
    <CommandEmpty />
  </CommandList>
</CommandDialog>

API Reference

CommandDialog

The dialog-only command palette root. It wraps Dialog and an always-open inline Autocomplete.

Use CommandDialog for command palettes. Use Autocomplete directly for popover menus.

Prop	Type	Default	Description
`open`	`boolean`	-	Whether the dialog is open.
`onOpenChange`	`(open: boolean) => void`	-	Handler called when the dialog opens or closes.
`items`	`Item[] \| { items: Item[] }[]`	-	Items filtered by the internal autocomplete.
`itemToStringValue`	`(item: Item) => string`	-	Converts object items to searchable text.
`filter`	Base UI filter function	-	Optional custom filter. Prefer the internal filter by default.
`filteredItems`	`Item[] \| { items: Item[] }[]`	-	Controlled filtered result set.
`title`	`string`	`"Command Palette"`	Accessible dialog title rendered in an `sr-only` header.
`description`	`string`	`"Search for a command to run..."`	Accessible dialog description.
`className`	`string`	-	Classes applied to the dialog content.

CommandInput

The command search input extends AutocompleteInput, including its built-in search icon and native clear button.

default renders a bordered field with inset spacing. flat renders a full-width header with a bottom divider. Both styles include the search icon and native clear button.

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text for the command input.
`variant`	`"default" \| "flat"`	`"default"`	Bordered field or full-width header with a bottom divider.
`className`	`string`	-	Classes for the styled field container.

The former search and clear props are removed.

CommandList

The scrollable command result list. Extends AutocompleteList.

CommandCollection

Renders filtered command items from CommandDialog.

Prop	Type	Default	Description
`children`	`(item, index) => ReactNode`	-	Renderer for each filtered item.

CommandGroup

Groups related command items.

Prop	Type	Default	Description
`heading`	`React.ReactNode`	-	Optional group heading.
`items`	`Item[]`	-	Group items for grouped root data.

For flat command palettes, do not pass items to CommandGroup; let CommandCollection read from CommandDialog.

CommandItem

A single command row. Extends AutocompleteItem.

Prop	Type	Default	Description
`value`	`Item`	-	The command value selected by Base UI.
`label`	`React.ReactNode`	`String(value)`	The main command label.
`icon`	`React.ReactNode`	-	An optional leading icon.
`desc`	`string`	-	An optional description below the label.
`variant`	`"default" \| "secondary" \| "sidebar" \| "warning" \| "error"`	`"default"`	The visual style of the item.
`shortcut`	`React.ReactNode`	-	Shortcut rendered with `CommandShortcut`.
`disabled`	`boolean`	-	Whether the command is disabled.
`onClick`	`React.MouseEventHandler<HTMLElement>`	-	Handler called when the item is clicked.

Use MenuItemAction as trailing content for metadata or multi-part shortcuts.

CommandEmpty

Content shown only when the filtered command result set is empty.

CommandSeparator

A visual divider between command groups.

CommandShortcut

Displays a keyboard shortcut hint aligned to the right of a command item.

Command

Workspace command palette

On this page