Navigationstable

Command

A fast, accessible command menu and search interface powered by cmdk, perfect for command palettes, quick actions, and search experiences.

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add command

When to use

Use the Command component when you need to provide users with a quick way to search, navigate, or execute actions within your application. It's ideal for implementing keyboard-driven workflows, command palettes, and search interfaces.

The Command component excels in applications where users need to quickly access features, navigate between pages, or filter through large datasets. It provides fuzzy search capabilities and keyboard navigation out of the box.

Best practices

Group related commands together using CommandGroup with descriptive headings.
Provide keyboard shortcuts and display them using CommandShortcut for power users.
Use icons alongside command items to improve visual scanning and recognition.
Implement CommandEmpty to provide helpful feedback when no results match the search query.
For command dialogs, bind them to common keyboard shortcuts like Cmd+K or Ctrl+K.
Keep command labels concise and action-oriented for better usability.

Accessibility

The Command component is built with accessibility in mind, featuring full keyboard navigation, ARIA attributes, and screen reader support. Users can navigate through items using arrow keys, select with Enter, and dismiss with Escape.

The component automatically manages focus states and announces changes to screen readers. When using CommandDialog, ensure you provide meaningful title and description props for better context.

Examples

Combine variants and sizes to meet your needs.

Basic command menu

A simple command menu with groups, items, and search functionality.

With icons and separators

Command menu with icons for better visual hierarchy and separators between groups.

Command dialog

A modal command palette triggered by a keyboard shortcut, perfect for global navigation.

Controlled selection

Example showing how to control the selected item and handle selection changes.

Selected: None

Properties

TSX interface that combines variants and default attributes.

Prop	Type	Default	Description
`title`	`string`	`'Command Palette'`	The title for the CommandDialog, used for accessibility and shown to screen readers.
`description`	`string`	`'Search for a command to run...'`	The description for the CommandDialog, providing context for screen readers.
`showCloseButton`	`boolean`	`true`	Controls whether the close button is visible in the CommandDialog.
`filter`	`(value: string, search: string) => number`	—	Custom filter function for command items. Return 0 to hide, 1 to show, or values in between for ranking.
`shouldFilter`	`boolean`	`true`	Whether the command list should be filtered based on search input.
`value`	`string`	—	Controlled value of the selected command item. Use with onValueChange.
`onValueChange`	`(value: string) => void`	—	Callback fired when the selected command value changes.

Search Components