Command

<Command class="max-w-md rounded-lg border shadow-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandGroup heading="Suggestions">
    <CommandItem>
      <Calendar class="mr-2 size-4" />
      <span>Calendar</span>
    </CommandItem>
    <CommandItem>
      <Search class="mr-2 size-4" />
      <span>Search</span>
    </CommandItem>
    <CommandItem>
      <Calculator class="mr-2 size-4" />
      <span>Calculator</span>
    </CommandItem>
  </CommandGroup>
  <CommandSeparator />
  <CommandGroup heading="Settings">
    <CommandItem>
      <User class="mr-2 size-4" />
      <span>Profile</span>
      <CommandShortcut>⌘P</CommandShortcut>
    </CommandItem>
    <CommandItem>
      <CreditCard class="mr-2 size-4" />
      <span>Billing</span>
      <CommandShortcut>⌘B</CommandShortcut>
    </CommandItem>
    <CommandItem>
      <Settings class="mr-2 size-4" />
      <span>Settings</span>
      <CommandShortcut>⌘S</CommandShortcut>
    </CommandItem>
  </CommandGroup>
</CommandList>
</Command>

Installation

npx bearnie add command

import Command from "@/components/ui/command/Command.astro";
import CommandInput from "@/components/ui/command/CommandInput.astro";
import CommandList from "@/components/ui/command/CommandList.astro";
import CommandEmpty from "@/components/ui/command/CommandEmpty.astro";
import CommandGroup from "@/components/ui/command/CommandGroup.astro";
import CommandItem from "@/components/ui/command/CommandItem.astro";
import CommandSeparator from "@/components/ui/command/CommandSeparator.astro";
import CommandShortcut from "@/components/ui/command/CommandShortcut.astro";

Usage

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

<Command class="max-w-md rounded-lg border">
<CommandInput placeholder="Search..." />
<CommandList>
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandGroup heading="Actions">
    <CommandItem>Action 1</CommandItem>
    <CommandItem>Action 2</CommandItem>
  </CommandGroup>
</CommandList>
</Command>

Examples

Basic

<Command class="max-w-sm rounded-lg border">
<CommandInput placeholder="Search..." />
<CommandList>
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandGroup>
    <CommandItem>Apple</CommandItem>
    <CommandItem>Banana</CommandItem>
    <CommandItem>Cherry</CommandItem>
    <CommandItem>Orange</CommandItem>
    <CommandItem>Strawberry</CommandItem>
  </CommandGroup>
</CommandList>
</Command>

With groups

<Command class="max-w-sm rounded-lg border">
<CommandInput placeholder="Type to search..." />
<CommandList>
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandGroup heading="Fruits">
    <CommandItem>Apple</CommandItem>
    <CommandItem>Banana</CommandItem>
    <CommandItem>Orange</CommandItem>
  </CommandGroup>
  <CommandSeparator />
  <CommandGroup heading="Vegetables">
    <CommandItem>Carrot</CommandItem>
    <CommandItem>Broccoli</CommandItem>
    <CommandItem>Spinach</CommandItem>
  </CommandGroup>
</CommandList>
</Command>

Dialog

<CommandDialog>
<CommandDialogTrigger>
  <Button variant="outline">
    <Search class="mr-2 size-4" />
    Search...
    <kbd class="ml-4 text-xs text-muted-foreground">⌘K</kbd>
  </Button>
</CommandDialogTrigger>
<CommandDialogOverlay />
<CommandDialogContent>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search</CommandItem>
        <CommandItem>Calculator</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>Profile</CommandItem>
        <CommandItem>Billing</CommandItem>
        <CommandItem>Settings</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialogContent>
</CommandDialog>

Arrow Up/Down - Navigate between items
Enter - Select the focused item
Escape - Close dialog or blur input
Cmd/Ctrl + K - Open command dialog (when using CommandDialog)

Props

Root container that manages filtering and keyboard navigation.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

CommandInput

Prop	Type	Default	Description
placeholder	string	”Search…”	Input placeholder text

CommandGroup

Prop	Type	Default	Description
heading	string	-	Group heading text

CommandItem

Prop	Type	Default	Description
value	string	-	Value returned on selection
disabled	boolean	false	Disable the item

CommandEmpty

Displayed when no items match the search query.

CommandSeparator

Visual divider between groups.

CommandShortcut

Displays keyboard shortcut hint, aligned to the right.

Command

Installation

Usage

Examples

Basic

With groups

Dialog

Keyboard navigation

Props

Command

CommandInput

CommandGroup

CommandItem

CommandEmpty

CommandSeparator

CommandShortcut