Command

Searchable command menu powered by cmdk with filtering, keyboard navigation, grouping, and dialog mode.

Preview

Installation

npx drivn add command

Usage

Import Command and compose with sub-components.

1 import { Command } from "@/components/ui/command"
2 import { Calendar, Search, Smile, User, CreditCard, Settings } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <Command>
7       <Command.Input placeholder="Type a command..." />
8       <Command.List>
9         <Command.Empty />
10         <Command.Group heading="Suggestions">
11           <Command.Item>
12             <Calendar className="w-4 h-4" />
13             Calendar
14           </Command.Item>
15           <Command.Item>
16             <Search className="w-4 h-4" />
17             Search
18           </Command.Item>
19           <Command.Item>
20             <Smile className="w-4 h-4" />
21             Emoji
22           </Command.Item>
23         </Command.Group>
24         <Command.Separator />
25         <Command.Group heading="Settings">
26           <Command.Item>
27             <User className="w-4 h-4" />
28             Profile
29           </Command.Item>
30           <Command.Item>
31             <CreditCard className="w-4 h-4" />
32             Billing
33           </Command.Item>
34           <Command.Item>
35             <Settings className="w-4 h-4" />
36             Preferences
37           </Command.Item>
38         </Command.Group>
39       </Command.List>
40     </Command>
41   )
42 }

Groups

Organize items into labeled groups with separators.

Shortcuts

Display keyboard shortcuts next to items with Command.Shortcut.

Dialog

Ctrl+K / Cmd+K is built in. Pass open and onOpenChange to control state.

Empty State

Customize the message shown when no results match.

API Reference

Command

Prop	Type	Default	Description
`label`	string	—	Accessible label for the command menu (screen readers)
`shouldFilter`	boolean	true	Whether cmdk should filter items automatically
`filter`	(value: string, search: string) => number	—	Custom filter function. Return 1 for match, 0 for no match
`value`	string	—	Controlled value of the selected item
`onValueChange`	(value: string) => void	—	Callback when the selected item changes
`className`	string	—	Additional CSS classes for the root element

Command.Input

Prop	Type	Default	Description
`placeholder`	string	—	Placeholder text for the search input
`value`	string	—	Controlled value of the search input
`onValueChange`	(search: string) => void	—	Callback when the search input value changes
`className`	string	—	Additional CSS classes for the input element

Command.Item

Prop	Type	Default	Description
`value`	string	—	Unique value for the item (defaults to text content)
`onSelect`	(value: string) => void	—	Callback when the item is selected via click or Enter
`disabled`	boolean	false	Whether the item is disabled
`keywords`	string[]	—	Additional search keywords not visible in the UI
`className`	string	—	Additional CSS classes for the item element

Command.Group

Prop	Type	Default	Description
`heading`	string	—	Group heading displayed above the items
`forceMount`	boolean	—	Keep the group visible even when no items match
`className`	string	—	Additional CSS classes for the group element

Command.Dialog

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state of the dialog
`onOpenChange`	(open: boolean) => void	—	Callback when the dialog open state changes
`label`	string	—	Accessible label for the command menu inside the dialog
`className`	string	—	Additional CSS classes for the dialog content

Command.Separator

Prop	Type	Default	Description
`alwaysRender`	boolean	—	Keep the separator visible even when adjacent groups are filtered out
`className`	string	—	Additional CSS classes for the separator element

1	import { Command } from "@/components/ui/command"
2	import { Calendar, Search, Smile, User, CreditCard, Settings } from "lucide-react"
3
4	export default function Page() {
5	return (
6	<Command>
7	<Command.Input placeholder="Type a command..." />
8	<Command.List>
9	<Command.Empty />
10	<Command.Group heading="Suggestions">
11	<Command.Item>
12	<Calendar className="w-4 h-4" />
13	Calendar
14	</Command.Item>
15	<Command.Item>
16	<Search className="w-4 h-4" />
17	Search
18	</Command.Item>
19	<Command.Item>
20	<Smile className="w-4 h-4" />
21	Emoji
22	</Command.Item>
23	</Command.Group>
24	<Command.Separator />
25	<Command.Group heading="Settings">
26	<Command.Item>
27	<User className="w-4 h-4" />
28	Profile
29	</Command.Item>
30	<Command.Item>
31	<CreditCard className="w-4 h-4" />
32	Billing
33	</Command.Item>
34	<Command.Item>
35	<Settings className="w-4 h-4" />
36	Preferences
37	</Command.Item>
38	</Command.Group>
39	</Command.List>
40	</Command>
41	)
42	}