Component

Command

A searchable command palette with groups, items, separators, and keyboard navigation. Uses the headless @refraction-ui/command core.

Examples

A command palette with grouped items and search filtering.

Installation

$pnpm add @refraction-ui/react-command

Usage

tsx

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator,
} from '@refraction-ui/react-command'

export function MyComponent() {
  return (
    <Command>
      <CommandInput placeholder="Search..." />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem onSelect={() => {}}>Search</CommandItem>
          <CommandItem onSelect={() => {}}>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	--	Callback when open state changes.
`filter`	`(value: string, search: string) => boolean`	--	Custom filter function.
`className`	`string`	--	Additional CSS classes.
`children`	`ReactNode`	--	CommandInput + CommandList with groups and items.