Command
Command menu for search and quick actions.
No results found.
Calendar
Search Emoji
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
About
The <Command /> component uses the cmdk component by Dip.
Installation
Usage
<Command className="max-w-sm rounded-lg border">
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty> {"No results found."->React.string} </Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item> {"Calendar"->React.string} </Command.Item>
<Command.Item> {"Search Emoji"->React.string} </Command.Item>
<Command.Item> {"Calculator"->React.string} </Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item> {"Profile"->React.string} </Command.Item>
<Command.Item> {"Billing"->React.string} </Command.Item>
<Command.Item> {"Settings"->React.string} </Command.Item>
</Command.Group>
</Command.List>
</Command>Examples
Basic
A simple command menu in a dialog.
Command Palette
Search for a command to run...
Shortcuts
Command Palette
Search for a command to run...
Groups
A command menu with groups, icons and separators.
Command Palette
Search for a command to run...
Scrollable
Scrollable command menu with multiple items.
Command Palette
Search for a command to run...
API Reference
See the cmdk documentation for more information.