Command
Command palette for searching and executing actions quickly.
Basic
No results found.
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S
<VStack className="w-full max-w-md mx-auto">
<Command className="rounded-xl border shadow-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<Calendar className="mr-2" />
<span>Calendar</span>
</CommandItem>
<CommandItem>
<Smile className="mr-2" />
<span>Search Emoji</span>
</CommandItem>
<CommandItem>
<Calculator className="mr-2" />
<span>Calculator</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<User className="mr-2" />
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<CreditCard className="mr-2" />
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<Settings className="mr-2" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</VStack> With groups
No results found.
Actions
New File
New Folder
New Window
Recent
project-alpha.tsx
components.json
styles.css
Help
Documentation
Keyboard Shortcuts
Report Issue
<VStack className="w-full max-w-md mx-auto">
<Command className="rounded-xl border shadow-md">
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem>New File</CommandItem>
<CommandItem>New Folder</CommandItem>
<CommandItem>New Window</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Recent">
<CommandItem>project-alpha.tsx</CommandItem>
<CommandItem>components.json</CommandItem>
<CommandItem>styles.css</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Help">
<CommandItem>Documentation</CommandItem>
<CommandItem>Keyboard Shortcuts</CommandItem>
<CommandItem>Report Issue</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</VStack> With shortcuts
No results found.
File
New Tab⌘T
New Window⌘N
Close Tab⌘W
Edit
Undo⌘Z
Redo⇧⌘Z
Find⌘F
<VStack className="w-full max-w-md mx-auto">
<Command className="rounded-xl border shadow-md">
<CommandInput placeholder="Type a command..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="File">
<CommandItem>
New Tab
<CommandShortcut>⌘T</CommandShortcut>
</CommandItem>
<CommandItem>
New Window
<CommandShortcut>⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
Close Tab
<CommandShortcut>⌘W</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Edit">
<CommandItem>
Undo
<CommandShortcut>⌘Z</CommandShortcut>
</CommandItem>
<CommandItem>
Redo
<CommandShortcut>⇧⌘Z</CommandShortcut>
</CommandItem>
<CommandItem>
Find
<CommandShortcut>⌘F</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</VStack> Dialog mode
No results found.
Suggestions
Calendar
Search Emoji
Calculator
<HStack justify="center" className="w-full">
<Command className="rounded-xl border shadow-lg w-full max-w-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<Calendar className="mr-2" />
Calendar
</CommandItem>
<CommandItem>
<Smile className="mr-2" />
Search Emoji
</CommandItem>
<CommandItem>
<Calculator className="mr-2" />
Calculator
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</HStack> Empty state
No results found.
Try a different search term.
<VStack className="w-full max-w-md mx-auto">
<Command className="rounded-xl border shadow-md">
<CommandInput placeholder="Search for anything..." />
<CommandList>
<CommandEmpty>
<div className="py-6 text-center">
<p className="text-muted-foreground">No results found.</p>
<p className="text-xs text-muted-foreground mt-1">Try a different search term.</p>
</div>
</CommandEmpty>
</CommandList>
</Command>
</VStack>