Command

Fast, composable, unstyled command menu for React.

Preview

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile ⌘P

Billing ⌘B

Settings ⌘S

Installation

$npx maddex add Command

Usage



1<!-- @import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from ../../lib/components -->
2
3<Command>
4  <CommandInput placeholder="Type a command or search..." />
5  <CommandList>
6    <CommandEmpty>No results found.</CommandEmpty>
7    <CommandGroup heading="Suggestions">
8      <CommandItem>Calendar</CommandItem>
9    </CommandGroup>
10  </CommandList>
11</Command>

Dialog

Props passed to CommandDialog are forwarded to the underlying DialogContent.

Press ⌘J or CtrlJ

1<!-- @import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from ../../lib/components -->
2
3<CommandDialog open="{open}" onOpenChange="{setOpen}">
4  <CommandInput placeholder="Type a command or search..." />
5  <CommandList>
6    <CommandEmpty>No results found.</CommandEmpty>
7    <CommandGroup heading="Suggestions">
8      <CommandItem>Calendar</CommandItem>
9    </CommandGroup>
10  </CommandList>
11</CommandDialog>