Copy to clipboard
No results found.
Suggestions
Calendar
Search
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S
<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>
<HugeIcon icon={Calendar03Icon} class="mr-2 size-4" />
<span>Calendar</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={Search01Icon} class="mr-2 size-4" />
<span>Search</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={CalculatorIcon} class="mr-2 size-4" />
<span>Calculator</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<HugeIcon icon={UserIcon} class="mr-2 size-4" />
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={CreditCardIcon} class="mr-2 size-4" />
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={Settings01Icon} class="mr-2 size-4" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</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>
<HugeIcon icon={Calendar03Icon} class="mr-2 size-4" />
<span>Calendar</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={Search01Icon} class="mr-2 size-4" />
<span>Search</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={CalculatorIcon} class="mr-2 size-4" />
<span>Calculator</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<HugeIcon icon={UserIcon} class="mr-2 size-4" />
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={CreditCardIcon} class="mr-2 size-4" />
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={Settings01Icon} class="mr-2 size-4" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</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>
<HugeIcon icon={Calendar03Icon} class="mr-2 size-4" />
<span>Calendar</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={Search01Icon} class="mr-2 size-4" />
<span>Search</span>
</CommandItem>
<CommandItem>
<HugeIcon icon={CalculatorIcon} class="mr-2 size-4" />
<span>Calculator</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<HugeIcon icon={UserIcon} class="mr-2 size-4" />
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={CreditCardIcon} class="mr-2 size-4" />
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<HugeIcon icon={Settings01Icon} class="mr-2 size-4" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
Installation
Copy to clipboard
npx bearnie add command
npx bearnie add commandnpx bearnie add command
bunx bearnie add command
bunx bearnie add commandbunx bearnie add command
pnpm dlx bearnie add command
pnpm dlx bearnie add commandpnpm dlx bearnie add command
yarn dlx bearnie add command
yarn dlx bearnie add commandyarn dlx bearnie add command
Usage
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandSeparator,
CommandShortcut,
} from "@/components/bearnie/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
Copy to clipboard
No results found.
Apple
Banana
Cherry
Orange
Strawberry
<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>
<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><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
Copy to clipboard
No results found.
Fruits
Apple
Banana
Orange
Vegetables
Carrot
Broccoli
Spinach
<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>
<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><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
Copy to clipboard
No results found.
Suggestions
Calendar
Search
Calculator
Settings
Profile
Billing
Settings
<CommandDialog>
<CommandDialogTrigger>
<Button variant="outline">
<HugeIcon icon={Search01Icon} 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>
<CommandDialog>
<CommandDialogTrigger>
<Button variant="outline">
<HugeIcon icon={Search01Icon} 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><CommandDialog>
<CommandDialogTrigger>
<Button variant="outline">
<HugeIcon icon={Search01Icon} 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>
Keyboard navigation
- 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
Command
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.