Yami

Command

Command menu for search and quick actions.

Installation

Add the command component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/command.json

Usage

import { CalendarIcon, SearchIcon, SettingsIcon, UserIcon } from "lucide-react"

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

<Command className="w-72 border border-border">
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem><CalendarIcon />Calendar</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Default

Code

import { CalendarIcon, SearchIcon, SettingsIcon, UserIcon } from "lucide-react"

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

<Command className="w-72 border border-border">
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem><CalendarIcon />Calendar</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>