Command

A command palette for fast keyboard-driven navigation and action execution.

Installation

pnpm dlx stera-ui@latest add command

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Examples

Command Dialog

Use CommandDialog and CommandDialogTrigger to open the command palette in a modal overlay.

Title & Description

Use CommandItemContent, CommandItemTitle, and CommandItemDescription for richer item layouts.

API Reference

CommandItem

Prop	Type	Default
`disabled`	`boolean`	`false`

CommandGroup

Prop	Type	Description
`heading`	`string`	Section label shown above the group

Subcomponents

Component	Description
`CommandInput`	Search/filter text input
`CommandList`	Scrollable list container
`CommandEmpty`	Shown when no items match the query
`CommandSeparator`	Horizontal divider between groups
`CommandShortcut`	Right-aligned keyboard shortcut label
`CommandItemContent`	Column container for title + description
`CommandItemTitle`	Primary text inside `CommandItemContent`
`CommandItemDescription`	Secondary text inside `CommandItemContent`
`CommandDialog`	Modal wrapper for the command palette
`CommandDialogTrigger`	Trigger that opens the `CommandDialog`