Command
Fast, composable, unstyled command menu for React.
Usage Examples
Basic Usage
A simple example of using the `Command` component to create a basic command menu.
<Command>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search</CommandItem>
<CommandItem>Settings</CommandItem>
</CommandGroup>
</CommandList>
</Command>With Dialog
Combine the `Command` menu with a dialog for a more advanced interface.
<CommandDialog>
<CommandInput placeholder="Search commands..." />
<CommandList>
<CommandEmpty>No commands found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem>Open Settings</CommandItem>
<CommandItem>Show Notifications</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>Props
Name
Type
Default
Description
children
React.ReactNode
-
The content inside the `Command` component. This can include input fields, items, groups, etc.
className
string
-
Custom CSS classes to apply to the root element of the `Command` component.