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

Prop	Type	Description
placeholder	string	Input placeholder text
value	string	Controlled input value
onValueChange	(value: string) => void	Value change callback

CommandList

Accepts all standard div attributes.

CommandItem

Prop	Type	Description
value	string	Item value for filtering
disabled	boolean	Whether the item is disabled
onSelect	(value: string) => void	Selection 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