120k
New

Command

PreviousNext

Command menu for search and quick actions.

About

The <Command /> component uses the cmdk component by Dip.

Installation

pnpm dlx shadcn@latest add @force-ui-ember/command

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/ember-ui/command';
<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>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Examples

Basic

A simple command menu in a dialog.

Shortcuts

Groups

A command menu with groups, icons and separators.

Scrollable

Scrollable command menu with multiple items.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the cmdk documentation for more information.