Command

<Command class="max-w-md rounded-lg border">
  <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>
  </CommandList>
</Command>

A fast, composable command menu / command palette.

Installation

railbase ui add command

Usage

import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/lib/ui/command";

<Command>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Anatomy

Exported parts: Command · CommandInput · CommandList · CommandEmpty · CommandGroup · CommandSeparator · CommandItem · CommandShortcut