Command

Fast, composable, unstyled command menu for React.
1<Flex style={{ width: 400 }}>
2  <Command>
3    <Command.Input placeholder="Type a command or search..." />
4    <Command.List>
5      <Command.Empty>No results found.</Command.Empty>
6      <Command.Group heading="Suggestions">
7        <Command.Item>Calendar</Command.Item>
8        <Command.Item>Search Emoji</Command.Item>
9        <Command.Item>Calculator</Command.Item>
10      </Command.Group>
11      <Command.Separator />
12      <Command.Group heading="Settings">
13        <Command.Item>Profile</Command.Item>
14        <Command.Item>Billing</Command.Item>
15        <Command.Item>Settings</Command.Item>
16      </Command.Group>
17    </Command.List>
18  </Command>
19</Flex>

Usage

1import { Command } from "@raystack/apsara";

Examples

Basic Usage

1<Flex style={{ width: 400 }}>
2  <Command>
3    <Command.Input placeholder="Type a command or search..." />
4    <Command.List>
5      <Command.Empty>No results found.</Command.Empty>
6      <Command.Group heading="Suggestions">
7        <Command.Item>Calendar</Command.Item>
8        <Command.Item>Search Emoji</Command.Item>
9        <Command.Item>Calculator</Command.Item>
10      </Command.Group>
11      <Command.Separator />
12      <Command.Group heading="Settings">
13        <Command.Item>Profile</Command.Item>
14        <Command.Item>Billing</Command.Item>
15        <Command.Item>Settings</Command.Item>
16      </Command.Group>
17    </Command.List>
18  </Command>
19</Flex>