Command

Category: Navigation — Pattern: Base UI Overlay

Dependency: cmdk

Import

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandSeparator,
  CommandItem,
  CommandShortcut,
  CommandDialog,
} from "@hareru/ui"

Exports

Key Props

Structure

• CommandInput [input]
• CommandList [container] (expected)
  • CommandEmpty [content]
  • CommandGroup [container] ×N
    • CommandItem [item] ×N
      • CommandShortcut [description]
  • CommandSeparator [separator] ×N

(expected) = recommended in canonical composition, not runtime-required.

Accessibility

• Roles: dialog
• Keyboard:
  • Arrow keys to navigate items
  • Enter to select
  • Escape to close
• Notes: Command palette with search and keyboard navigation.

Usage

import { useState } from "react"
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@hareru/ui"

function CommandPalette() {
  const [open, setOpen] = useState(false)

  return (
    <CommandDialog open={open} onOpenChange={setOpen} title="Commands">
      <CommandInput placeholder="Search..." />
      <CommandList>
        <CommandEmpty>No results</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem>Settings</CommandItem>
          <CommandItem>Profile</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}

Notes

• CommandDialog is the recommended entry point for command palette use cases — it handles the modal wrapper and accessibility title automatically.
• Use the standalone Command component when embedding the palette inline (e.g. inside a Popover).
• Items are filtered by fuzzy matching against their text content by default. Pass filter to Command to provide a custom filter function.