Command

Command menu for search and quick actions. Built with cmdk.

Inline

A command menu rendered inline with a border.

Installation

CLI

npx @sonojs/ui@latest add command

Also needsnpx @sonojs/ui@latest add dialog input-group && npm i cmdk lucide-react

Usage

command.tsx

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

export function Example() {
  return (
    <Command className="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>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>Profile</CommandItem>
          <CommandItem>Billing</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Props

Prop	Type	Default	Description
title	string	"Command Palette"	On CommandDialog — accessible dialog title.
description	string	"Search for a command to run..."	On CommandDialog — accessible dialog description.
showCloseButton	boolean	false	On CommandDialog — show the dialog close control.
heading	string	—	On CommandGroup — section label above items.