Command

A searchable command palette with grouped items, keyboard navigation, and optional dialog composition.

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile ⌘P

Billing ⌘B

Settings ⌘S

1
---
2
import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from '@lucide/astro';
3

4
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@bejamas/registry/ui/command';
5
---
6

7
<Command class="max-w-sm rounded-lg border">
8
  <CommandInput placeholder="Type a command or search..." />
9
  <CommandList>
10
    <CommandEmpty>No results found.</CommandEmpty>
11
    <CommandGroup heading="Suggestions">
12
      <CommandItem>
13
        <CalendarIcon />
14
        <span>Calendar</span>
15
      </CommandItem>
16
      <CommandItem>
17
        <SmileIcon />
18
        <span>Search Emoji</span>
19
      </CommandItem>
20
      <CommandItem disabled>
21
        <CalculatorIcon />
22
        <span>Calculator</span>
23
      </CommandItem>
24
    </CommandGroup>
25
    <CommandSeparator />
26
    <CommandGroup heading="Settings">
27
      <CommandItem>
28
        <UserIcon />
29
        <span>Profile</span>
30
        <CommandShortcut>⌘P</CommandShortcut>
31
      </CommandItem>
32
      <CommandItem>
33
        <CreditCardIcon />
34
        <span>Billing</span>
35
        <CommandShortcut>⌘B</CommandShortcut>
36
      </CommandItem>
37
      <CommandItem>
38
        <SettingsIcon />
39
        <span>Settings</span>
40
        <CommandShortcut>⌘S</CommandShortcut>
41
      </CommandItem>
42
    </CommandGroup>
43
  </CommandList>
44
</Command>

Installation

bunx bejamas add command

npx bejamas add command

pnpm dlx bejamas add command

yarn dlx bejamas add command

Usage

1
---
2
import {
3
  Command,
4
  CommandEmpty,
5
  CommandGroup,
6
  CommandInput,
7
  CommandItem,
8
  CommandList,
9
  CommandSeparator,
10
  CommandShortcut,
11
} from '@bejamas/ui/components/command';
12
import {
13
  Calculator,
14
  Calendar,
15
  CreditCard,
16
  Settings,
17
  Smile,
18
  User,
19
} from '@lucide/astro';
20
---
21

22
<Command class="max-w-sm rounded-lg border">
23
  <CommandInput placeholder="Type a command or search..." />
24
  <CommandList>
25
    <CommandEmpty>No results found.</CommandEmpty>
26
    <CommandGroup heading="Suggestions">
27
      <CommandItem>
28
        <CalendarIcon />
29
        <span>Calendar</span>
30
      </CommandItem>
31
      <CommandItem>
32
        <SmileIcon />
33
        <span>Search Emoji</span>
34
      </CommandItem>
35
      <CommandItem disabled>
36
        <Calculator />
37
        <span>Calculator</span>
38
      </CommandItem>
39
    </CommandGroup>
40
    <CommandSeparator />
41
    <CommandGroup heading="Settings">
42
      <CommandItem>
43
        <User />
44
        <span>Profile</span>
45
        <CommandShortcut>⌘P</CommandShortcut>
46
      </CommandItem>
47
      <CommandItem>
48
        <CreditCard />
49
        <span>Billing</span>
50
        <CommandShortcut>⌘B</CommandShortcut>
51
      </CommandItem>
52
      <CommandItem>
53
        <Settings />
54
        <span>Settings</span>
55
        <CommandShortcut>⌘S</CommandShortcut>
56
      </CommandItem>
57
    </CommandGroup>
58
  </CommandList>
59
</Command>

Props

Prop	Type	Default
`label`	`string`
`defaultValue`	`string`
`defaultSearch`	`string`
`shouldFilter`	`boolean`
`loop`	`boolean`
`disablePointerSelection`	`boolean`
`vimBindings`	`boolean`
`class`	`string`	`""`

API Reference

Events

Event	Detail	Description
`command:change`	`{ value: string \| null }`	Fired when the active item changes
`command:search-change`	`{ search: string }`	Fired when the search query changes
`command:select`	`{ value: string }`	Fired when an item is selected

Programmatic Control

const command = document.getElementById('my-command');

command.dispatchEvent(new CustomEvent('command:set', {
  detail: {
    search: 'settings',
    value: 'settings'
  }
}));

Dialog Composition

1
<CommandDialog defaultOpen>
2
  <Command>
3
    <CommandInput placeholder="Search..." />
4
    <CommandList>
5
      <CommandEmpty>No results found.</CommandEmpty>
6
      <CommandItem>Open settings</CommandItem>
7
    </CommandList>
8
  </Command>
9
</CommandDialog>