Skip to Content
DocumentationComponentsCommand

Command

A command palette interface for searching and executing actions, similar to Spotlight or Ctrl+K interfaces.

Usage

import { Command } from "@rhinolabs/ui"
 
export default function CommandDemo() {
  return (
    <Command>
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Suggestions">
          <Command.Item>
            <span>Calendar</span>
          </Command.Item>
          <Command.Item>
            <span>Search</span>
            <Command.Shortcut>⌘ K</Command.Shortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  )
}

Examples

Basic Command Menu

A simple command menu with groups and items.

<Command>
  <Command.Input placeholder="Type a command..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Actions">
      <Command.Item>
        <span>New File</span>
        <Command.Shortcut>⌘ N</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <span>Save</span>
        <Command.Shortcut>⌘ S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <span>Preferences</span>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command>

Dialog Command Menu

A command menu in a dialog overlay.

<Command.Dialog>
  <Command.Input placeholder="Search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Navigation">
      <Command.Item>
        <span>Dashboard</span>
      </Command.Item>
      <Command.Item>
        <span>Projects</span>
      </Command.Item>
      <Command.Item>
        <span>Settings</span>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

With Icons

Command menu with icons for visual enhancement.

<Command>
  <Command.Input placeholder="Search..." />
  <Command.List>
    <Command.Group heading="Actions">
      <Command.Item>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 5v14M5 12h14"/>
        </svg>
        <span>New Item</span>
      </Command.Item>
      <Command.Item>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="7 10 12 15 17 10"/>
          <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        <span>Download</span>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command>

Props

Command

The root component that accepts all standard div attributes.

CommandInput

PropTypeDescription
placeholderstringInput placeholder text
valuestringControlled input value
onValueChange(value: string) => voidValue change callback

CommandList

Accepts all standard div attributes.

CommandItem

PropTypeDescription
valuestringItem value for filtering
disabledbooleanWhether the item is disabled
onSelect(value: string) => voidSelection callback

Design Considerations

  • Keep commands concise and clear
  • Group related commands logically
  • Show keyboard shortcuts when applicable
  • Provide clear empty states
  • Use consistent command naming

Accessibility

  • Supports keyboard navigation
  • Provides ARIA labels
  • Maintains focus management
  • Announces search results
  • Handles screen reader interactions
Last updated on
CollapsibleContext Menu