Command

Fast, composable, unstyled command menu for React.

Dependencies

@radix-ui/react-dialog (opens in a new tab) - Dialog Primitive.
cmdk (opens in a new tab) - By Paco Coursey.

Anatomy

<Command>
  <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>

Usage

Keyboard Shortcut

Command can also be called with a keyboard shortcut.

Switcher

Command, dialog, and popover can be used together to create a switcher.

Dependencies

@radix-ui/react-dialog (opens in a new tab) - Dialog Primitive.
@radix-ui/react-popover (opens in a new tab) - Popover Primitive.

Faceted filter

Command, dialog, and popover can be used together to create a faceted filter.

Dependencies

@radix-ui/react-dialog (opens in a new tab) - Dialog Primitive.
@radix-ui/react-popover (opens in a new tab) - Popover Primitive.

Carousel File Uploader