command/usage

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Command basic usage example

A basic command menu example: ```tsx import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command" <Command className="max-w-sm rounded-lg border"> <CommandInput placeholder="Type a command or search..." /> <CommandList renderEmptyState={() => <CommandEmpty>No results found.</CommandEmpty>} > <CommandGroup heading="Suggestions"> <CommandItem>Calendar</CommandItem> <CommandItem>Search Emoji</CommandItem> <CommandItem>Calculator</CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Settings"> <CommandItem>Profile</CommandItem> <CommandItem>Billing</CommandItem> <CommandItem>Settings</CommandItem> </CommandGroup> </CommandList> </Command> ```

Command basic usage example

Example of basic command usage: <Command className="max-w-sm rounded-lg border"><CommandInput placeholder="Type a command or search..." /><CommandList><CommandEmpty>No results found.</CommandEmpty><CommandGroup heading="Suggestions"><CommandItem>Calendar</CommandItem><CommandItem>Search Emoji</CommandItem><CommandItem>Calculator</CommandItem></CommandGroup><CommandSeparator /><CommandGroup heading="Settings"><CommandItem>Profile</CommandItem><CommandItem>Billing</CommandItem><CommandItem>Settings</CommandItem></CommandGroup></CommandList></Command>

Command component imports

The Command component exports the following subcomponents for import: Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, and CommandShortcut. These are imported from @/components/ui/command.

Command component basic example

A basic command menu example: ```tsx <Command className="max-w-sm rounded-lg border"> <CommandInput placeholder="Type a command or search..." /> <CommandList> <CommandEmpty>No results found.</CommandEmpty> <CommandGroup heading="Suggestions"> <CommandItem>Calendar</CommandItem> <CommandItem>Search Emoji</CommandItem> <CommandItem>Calculator</CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Settings"> <CommandItem>Profile</CommandItem> <CommandItem>Billing</CommandItem> <CommandItem>Settings</CommandItem> </CommandGroup> </CommandList> </Command> ```

Give your agent this brain