Command

Command menu for search and quick actions.

Kobalte

1
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-solid";
2
import {
3
  Command,
4
  CommandEmpty,
5
  CommandGroup,
6
  CommandInput,
7
  CommandItem,
8
  CommandList,
9
  CommandSeparator,
10
  CommandShortcut,
11
} from "~/components/ui/command";
12

13
export default function CommandDemo() {
14
  return (
15
    <Command class="max-w-sm rounded-lg border">
16
      <CommandInput placeholder="Type a command or search..." />
17
      <CommandList>
18
        <CommandEmpty>No results found.</CommandEmpty>
19
        <CommandGroup heading="Suggestions">
20
          <CommandItem value="calendar">
21
            <Calendar />
22
            <span>Calendar</span>
23
          </CommandItem>
24
          <CommandItem value="search-emoji">
25
            <Smile />
26
            <span>Search Emoji</span>
27
          </CommandItem>
28
          <CommandItem value="calculator" disabled>
29
            <Calculator />
30
            <span>Calculator</span>
31
          </CommandItem>
32
        </CommandGroup>
33
        <CommandSeparator />
34
        <CommandGroup heading="Settings">
35
          <CommandItem value="profile">
36
            <User />
37
            <span>Profile</span>
38
            <CommandShortcut>⌘P</CommandShortcut>
39
          </CommandItem>
40
          <CommandItem value="billing">
41
            <CreditCard />
42
            <span>Billing</span>
43
            <CommandShortcut>⌘B</CommandShortcut>
44
          </CommandItem>
45
          <CommandItem value="settings">
46
            <Settings />
47
            <span>Settings</span>
48
            <CommandShortcut>⌘S</CommandShortcut>
49
          </CommandItem>
50
        </CommandGroup>
51
      </CommandList>
52
    </Command>
53
  );
54
}

About

The <Command /> component is built with cmdk-solid, and CommandDialog composes Kobalte Dialog for accessible modal and keyboard behavior.

Installation

pnpm dlx shadcn@latest add @zaidan/command
npx shadcn@latest add @zaidan/command
yarn dlx shadcn@latest add @zaidan/command
bunx --bun shadcn@latest add @zaidan/command

Usage

1
import {
2
  Command,
3
  CommandEmpty,
4
  CommandGroup,
5
  CommandInput,
6
  CommandItem,
7
  CommandList,
8
  CommandSeparator,
9
  CommandShortcut,
10
} from "~/components/ui/command";

1
<Command class="max-w-sm rounded-lg border">
2
  <CommandInput placeholder="Type a command or search..." />
3
  <CommandList>
4
    <CommandEmpty>No results found.</CommandEmpty>
5
    <CommandGroup heading="Suggestions">
6
      <CommandItem value="calendar">Calendar</CommandItem>
7
      <CommandItem value="search-emoji">Search Emoji</CommandItem>
8
      <CommandItem value="calculator">Calculator</CommandItem>
9
    </CommandGroup>
10
    <CommandSeparator />
11
    <CommandGroup heading="Settings">
12
      <CommandItem value="profile">Profile</CommandItem>
13
      <CommandItem value="billing">Billing</CommandItem>
14
      <CommandItem value="settings">Settings</CommandItem>
15
    </CommandGroup>
16
  </CommandList>
17
</Command>

Composition

Use the following composition to build a Command:

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

Basic

A simple command menu in a dialog.

1
import { createSignal } from "solid-js";
2
import { Button } from "~/components/ui/button";
3
import {
4
  Command,
5
  CommandDialog,
6
  CommandEmpty,
7
  CommandGroup,
8
  CommandInput,
9
  CommandItem,
10
  CommandList,
11
} from "~/components/ui/command";
12

13
export default function CommandBasic() {
14
  const [open, setOpen] = createSignal(false);
15

16
  return (
17
    <div class="flex flex-col gap-4">
18
      <Button onClick={() => setOpen(true)} variant="outline" class="w-fit">
19
        Open Menu
20
      </Button>
21
      <CommandDialog open={open()} onOpenChange={setOpen}>
22
        <Command>
23
          <CommandInput placeholder="Type a command or search..." />
24
          <CommandList>
25
            <CommandEmpty>No results found.</CommandEmpty>
26
            <CommandGroup heading="Suggestions">
27
              <CommandItem value="calendar">Calendar</CommandItem>
28
              <CommandItem value="search-emoji">Search Emoji</CommandItem>
29
              <CommandItem value="calculator">Calculator</CommandItem>
30
            </CommandGroup>
31
          </CommandList>
32
        </Command>
33
      </CommandDialog>
34
    </div>
35
  );
36
}

Shortcuts

1
import { CreditCard, Settings, User } from "lucide-solid";
2
import { createSignal } from "solid-js";
3
import { Button } from "~/components/ui/button";
4
import {
5
  Command,
6
  CommandDialog,
7
  CommandEmpty,
8
  CommandGroup,
9
  CommandInput,
10
  CommandItem,
11
  CommandList,
12
  CommandShortcut,
13
} from "~/components/ui/command";
14

15
export default function CommandShortcuts() {
16
  const [open, setOpen] = createSignal(false);
17

18
  return (
19
    <div class="flex flex-col gap-4">
20
      <Button onClick={() => setOpen(true)} variant="outline" class="w-fit">
21
        Open Menu
22
      </Button>
23
      <CommandDialog open={open()} onOpenChange={setOpen}>
24
        <Command>
25
          <CommandInput placeholder="Type a command or search..." />
26
          <CommandList>
27
            <CommandEmpty>No results found.</CommandEmpty>
28
            <CommandGroup heading="Settings">
29
              <CommandItem value="profile">
30
                <User />
31
                <span>Profile</span>
32
                <CommandShortcut>⌘P</CommandShortcut>
33
              </CommandItem>
34
              <CommandItem value="billing">
35
                <CreditCard />
36
                <span>Billing</span>
37
                <CommandShortcut>⌘B</CommandShortcut>
38
              </CommandItem>
39
              <CommandItem value="settings">
40
                <Settings />
41
                <span>Settings</span>
42
                <CommandShortcut>⌘S</CommandShortcut>
43
              </CommandItem>
44
            </CommandGroup>
45
          </CommandList>
46
        </Command>
47
      </CommandDialog>
48
    </div>
49
  );
50
}

Groups

A command menu with groups, icons, and separators.

1
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-solid";
2
import { createSignal } from "solid-js";
3
import { Button } from "~/components/ui/button";
4
import {
5
  Command,
6
  CommandDialog,
7
  CommandEmpty,
8
  CommandGroup,
9
  CommandInput,
10
  CommandItem,
11
  CommandList,
12
  CommandSeparator,
13
  CommandShortcut,
14
} from "~/components/ui/command";
15

16
export default function CommandGroups() {
17
  const [open, setOpen] = createSignal(false);
18

19
  return (
20
    <div class="flex flex-col gap-4">
21
      <Button onClick={() => setOpen(true)} variant="outline" class="w-fit">
22
        Open Menu
23
      </Button>
24
      <CommandDialog open={open()} onOpenChange={setOpen}>
25
        <Command>
26
          <CommandInput placeholder="Type a command or search..." />
27
          <CommandList>
28
            <CommandEmpty>No results found.</CommandEmpty>
29
            <CommandGroup heading="Suggestions">
30
              <CommandItem value="calendar">
31
                <Calendar />
32
                <span>Calendar</span>
33
              </CommandItem>
34
              <CommandItem value="search-emoji">
35
                <Smile />
36
                <span>Search Emoji</span>
37
              </CommandItem>
38
              <CommandItem value="calculator">
39
                <Calculator />
40
                <span>Calculator</span>
41
              </CommandItem>
42
            </CommandGroup>
43
            <CommandSeparator />
44
            <CommandGroup heading="Settings">
45
              <CommandItem value="profile">
46
                <User />
47
                <span>Profile</span>
48
                <CommandShortcut>⌘P</CommandShortcut>
49
              </CommandItem>
50
              <CommandItem value="billing">
51
                <CreditCard />
52
                <span>Billing</span>
53
                <CommandShortcut>⌘B</CommandShortcut>
54
              </CommandItem>
55
              <CommandItem value="settings">
56
                <Settings />
57
                <span>Settings</span>
58
                <CommandShortcut>⌘S</CommandShortcut>
59
              </CommandItem>
60
            </CommandGroup>
61
          </CommandList>
62
        </Command>
63
      </CommandDialog>
64
    </div>
65
  );
66
}

Scrollable

Scrollable command menu with multiple items.

1
import {
2
  Bell,
3
  Calculator,
4
  Calendar,
5
  ClipboardPaste,
6
  Code,
7
  Copy,
8
  CreditCard,
9
  FileText,
10
  Folder,
11
  FolderPlus,
12
  HelpCircle,
13
  Home,
14
  Image,
15
  Inbox,
16
  LayoutGrid,
17
  List,
18
  Plus,
19
  Scissors,
20
  Settings,
21
  Trash,
22
  User,
23
  ZoomIn,
24
  ZoomOut,
25
} from "lucide-solid";
26
import { createSignal } from "solid-js";
27
import { Button } from "~/components/ui/button";
28
import {
29
  Command,
30
  CommandDialog,
31
  CommandEmpty,
32
  CommandGroup,
33
  CommandInput,
34
  CommandItem,
35
  CommandList,
36
  CommandSeparator,
37
  CommandShortcut,
38
} from "~/components/ui/command";
39

40
export default function CommandScrollable() {
41
  const [open, setOpen] = createSignal(false);
42

43
  return (
44
    <div class="flex flex-col gap-4">
45
      <Button onClick={() => setOpen(true)} variant="outline" class="w-fit">
46
        Open Menu
47
      </Button>
48
      <CommandDialog open={open()} onOpenChange={setOpen}>
49
        <Command>
50
          <CommandInput placeholder="Type a command or search..." />
51
          <CommandList>
52
            <CommandEmpty>No results found.</CommandEmpty>
53
            <CommandGroup heading="Navigation">
54
              <CommandItem value="home">
55
                <Home />
56
                <span>Home</span>
57
                <CommandShortcut>⌘H</CommandShortcut>
58
              </CommandItem>
59
              <CommandItem value="inbox">
60
                <Inbox />
61
                <span>Inbox</span>
62
                <CommandShortcut>⌘I</CommandShortcut>
63
              </CommandItem>
64
              <CommandItem value="documents">
65
                <FileText />
66
                <span>Documents</span>
67
                <CommandShortcut>⌘D</CommandShortcut>
68
              </CommandItem>
69
              <CommandItem value="folders">
70
                <Folder />
71
                <span>Folders</span>
72
                <CommandShortcut>⌘F</CommandShortcut>
73
              </CommandItem>
74
            </CommandGroup>
75
            <CommandSeparator />
76
            <CommandGroup heading="Actions">
77
              <CommandItem value="new-file">
78
                <Plus />
79
                <span>New File</span>
80
                <CommandShortcut>⌘N</CommandShortcut>
81
              </CommandItem>
82
              <CommandItem value="new-folder">
83
                <FolderPlus />
84
                <span>New Folder</span>
85
                <CommandShortcut>⇧⌘N</CommandShortcut>
86
              </CommandItem>
87
              <CommandItem value="copy">
88
                <Copy />
89
                <span>Copy</span>
90
                <CommandShortcut>⌘C</CommandShortcut>
91
              </CommandItem>
92
              <CommandItem value="cut">
93
                <Scissors />
94
                <span>Cut</span>
95
                <CommandShortcut>⌘X</CommandShortcut>
96
              </CommandItem>
97
              <CommandItem value="paste">
98
                <ClipboardPaste />
99
                <span>Paste</span>
100
                <CommandShortcut>⌘V</CommandShortcut>
101
              </CommandItem>
102
              <CommandItem value="delete">
103
                <Trash />
104
                <span>Delete</span>
105
                <CommandShortcut>⌫</CommandShortcut>
106
              </CommandItem>
107
            </CommandGroup>
108
            <CommandSeparator />
109
            <CommandGroup heading="View">
110
              <CommandItem value="grid-view">
111
                <LayoutGrid />
112
                <span>Grid View</span>
113
              </CommandItem>
114
              <CommandItem value="list-view">
115
                <List />
116
                <span>List View</span>
117
              </CommandItem>
118
              <CommandItem value="zoom-in">
119
                <ZoomIn />
120
                <span>Zoom In</span>
121
                <CommandShortcut>⌘+</CommandShortcut>
122
              </CommandItem>
123
              <CommandItem value="zoom-out">
124
                <ZoomOut />
125
                <span>Zoom Out</span>
126
                <CommandShortcut>⌘-</CommandShortcut>
127
              </CommandItem>
128
            </CommandGroup>
129
            <CommandSeparator />
130
            <CommandGroup heading="Account">
131
              <CommandItem value="profile">
132
                <User />
133
                <span>Profile</span>
134
                <CommandShortcut>⌘P</CommandShortcut>
135
              </CommandItem>
136
              <CommandItem value="billing">
137
                <CreditCard />
138
                <span>Billing</span>
139
                <CommandShortcut>⌘B</CommandShortcut>
140
              </CommandItem>
141
              <CommandItem value="settings">
142
                <Settings />
143
                <span>Settings</span>
144
                <CommandShortcut>⌘S</CommandShortcut>
145
              </CommandItem>
146
              <CommandItem value="notifications">
147
                <Bell />
148
                <span>Notifications</span>
149
              </CommandItem>
150
              <CommandItem value="help">
151
                <HelpCircle />
152
                <span>Help & Support</span>
153
              </CommandItem>
154
            </CommandGroup>
155
            <CommandSeparator />
156
            <CommandGroup heading="Tools">
157
              <CommandItem value="calculator">
158
                <Calculator />
159
                <span>Calculator</span>
160
              </CommandItem>
161
              <CommandItem value="calendar">
162
                <Calendar />
163
                <span>Calendar</span>
164
              </CommandItem>
165
              <CommandItem value="image-editor">
166
                <Image />
167
                <span>Image Editor</span>
168
              </CommandItem>
169
              <CommandItem value="code-editor">
170
                <Code />
171
                <span>Code Editor</span>
172
              </CommandItem>
173
            </CommandGroup>
174
          </CommandList>
175
        </Command>
176
      </CommandDialog>
177
    </div>
178
  );
179
}

API Reference

For command props, filtering, and keyboard behavior, see the cmdk-solid API reference.

Command

Command Palette

Command Palette

Command Palette

Command Palette