

<Preview name="CommandSurfaceExample" />

## Overview [#overview]

`Command` provides command palette building blocks for shortcut-based and search-driven workflows.

## Usage [#usage]

```tsx
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@tilt-legal/cubitt-components/command";
```

```tsx
<Command>
  <CommandInput placeholder="Search commands..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Workspace">
      <CommandItem value="files">Files</CommandItem>
      <CommandItem value="settings">
        Settings
        <CommandShortcut>G S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
  </CommandList>
</Command>
```

```tsx
<CommandDialog open>
  <CommandInput placeholder="Jump to..." />
  <CommandList>
    <CommandGroup heading="Workspace">
      <CommandItem value="recent-files">Recent files</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>
```

## Examples [#examples]

### Surface [#surface]

<Preview name="CommandSurfaceExample" />

### Dialog Open [#dialog-open]

<Preview name="CommandDialogOpenExample" />
