Command - rafty/ui Docs

The Command component in React can function as a menu and also serves as an accessible combobox.

When you render items with it, it automatically filters and sorts them. It offers a fully composable API, allowing you to wrap items in other components or even use static JSX. This component is made on top of CMDKs Command Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import all parts and piece them together.

import {
  Command,
  CommandList,
  CommandInput,
  CommandEmpty,
  CommandGroup,
  CommandSeparator
  CommandItem,
  CommandDialog,
  CommandShortcut,
  CommandLoading

} from "@rafty/ui";

 <Command>
     <CommandDialog>
     <CommandInput />
      <CommandList>
      <CommandLoading/>
        <CommandEmpty />
        <CommandGroup>
          <CommandItem>
            <CommandShortcut />
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
      </CommandList>
      </CommandDialog>
    </Command>

Usage

<Command className="dark:border-secondary-700 rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>
      No results found.
    </CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Calendar
        </span>
      </CommandItem>
      <CommandItem>
        <FaceSmileIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Search Emoji
        </span>
      </CommandItem>
      <CommandItem>
        <CalculatorIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Calculator
        </span>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <UserIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Profile
        </span>
        <CommandShortcut>
          ⌘P
        </CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCardIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Billing
        </span>
        <CommandShortcut>
          ⌘B
        </CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Cog8ToothIcon
          className="mr-2 stroke-2"
          height={16}
          width={16}
        />
        <span>
          Settings
        </span>
        <CommandShortcut>
          ⌘S
        </CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>