Command

Command menu for search and quick actions.

<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon />
        <span>Calendar</span>
      </CommandItem>
      <CommandItem>
        <SmileIcon />
        <span>Search Emoji</span>
      </CommandItem>
      <CommandItem disabled>
        <CalculatorIcon />
        <span>Calculator</span>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <UserIcon />
        <span>Profile</span>
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCardIcon />
        <span>Billing</span>
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <SettingsIcon />
        <span>Settings</span>
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

About

The Command component uses the cmdk component by Dip.

Installation

pnpm dlx cubix@latest add command --base aria

Usage

Import

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

Example

<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Examples

Basic

A simple command menu in a dialog.

const [open, setOpen] = React.useState(false)

<div className="flex flex-col gap-4">
  <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
    Open Menu
  </Button>
  <CommandDialog open={open} onOpenChange={setOpen}>
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</div>

Shortcuts

const [open, setOpen] = React.useState(false)

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Settings">
        <CommandItem>
          <UserIcon />
          <span>Profile</span>
          <CommandShortcut>⌘P</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <CreditCardIcon />
          <span>Billing</span>
          <CommandShortcut>⌘B</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <SettingsIcon />
          <span>Settings</span>
          <CommandShortcut>⌘S</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

Groups

A command menu with groups, icons and separators.

const [open, setOpen] = React.useState(false)

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>
          <CalendarIcon />
          <span>Calendar</span>
        </CommandItem>
        <CommandItem>
          <SmileIcon />
          <span>Search Emoji</span>
        </CommandItem>
        <CommandItem>
          <CalculatorIcon />
          <span>Calculator</span>
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>
          <UserIcon />
          <span>Profile</span>
          <CommandShortcut>⌘P</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <CreditCardIcon />
          <span>Billing</span>
          <CommandShortcut>⌘B</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <SettingsIcon />
          <span>Settings</span>
          <CommandShortcut>⌘S</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

Scrollable

Scrollable command menu with multiple items.

const [open, setOpen] = React.useState(false)

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Navigation">
        <CommandItem>
          <HomeIcon />
          <span>Home</span>
          <CommandShortcut>⌘H</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <InboxIcon />
          <span>Inbox</span>
          <CommandShortcut>⌘I</CommandShortcut>
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Actions">
        <CommandItem>
          <PlusIcon />
          <span>New File</span>
          <CommandShortcut>⌘N</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <TrashIcon />
          <span>Delete</span>
          <CommandShortcut>⌫</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

API Reference

Note: See the cmdk documentation for more information.

Command

The root that provides search context to input, list, and items.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	CommandInput and CommandList.

CommandDialog

Wraps Command in a dialog for a palette overlay.

Prop	Type	Default	Description
open	boolean	-	Controlled open state of the dialog.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
title	string	"Command Palette"	Accessible title, visually hidden.
description	string	"Search for a command to run..."	Accessible description, visually hidden.
showCloseButton	boolean	false	Show the dialog close button.

CommandInput

Prop	Type	Default	Description
placeholder	string	-	Placeholder text for the search field.
value	string	-	Controlled search value.
onValueChange	(search: string) => void	-	Called when the search value changes.

CommandGroup

Prop	Type	Default	Description
heading	string	-	Optional group label.

CommandItem

Prop	Type	Default	Description
disabled	boolean	-	Disable the item.
onSelect	(value: string) => void	-	Called when the item is selected.
value	string	-	Search value. Defaults to the item text.

About

Installation

Usage

Composition

Examples

Basic

Command Palette

Shortcuts

Command Palette

Groups

Command Palette

Scrollable

Command Palette

API Reference

Command

CommandDialog

CommandInput

CommandGroup

CommandItem