Command Component

A command palette component with fuzzy search functionality, built on top of cmdk.

Provides a popup command dialog interface
Supports keyboard navigation
Built-in search functionality
Customizable command groups and items

Installation

The Command component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the command component in your project.

React TSX
1import { 
2  Command,
3  CommandDialog,
4  CommandInput,
5  CommandList,
6  CommandEmpty,
7  CommandGroup,
8  CommandItem,
9  CommandShortcut,
10  CommandSeparator
11} from "@/components/modern-ui/command"

Examples

Basic Command

A simple command menu with basic functionality.

Command with Icons

Add icons to command items for better visual context.

Command with Shortcuts

Display keyboard shortcuts next to command items.

Command with Multiple Groups

Organize commands into multiple groups separated by dividers.

Command Dialog

A dialog version of the command menu that can be triggered with a button.

Note: For accessibility, always include a DialogTitle for screen readers. If you want to hide the title visually, use the VisuallyHidden component.

API Reference

Command Component API

Component	Props	Description
`Command`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive>`	Root component for the command menu
`CommandDialog`	`DialogProps`	Dialog wrapper for the command menu
`CommandInput`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>`	Input field for searching commands
`CommandList`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>`	Container for command items
`CommandEmpty`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>`	Empty state when no results are found
`CommandGroup`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>`	Group of related command items
`CommandItem`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>`	Individual command item
`CommandShortcut`	`React.HTMLAttributes<HTMLSpanElement>`	Display keyboard shortcuts
`CommandSeparator`	`React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>`	Visual separator between groups

CommandItem Props

Prop	Type	Description
`disabled`	`boolean`	Whether the item is disabled
`onSelect`	`() => void`	Function called when the item is selected
`value`	`string`	Value used for filtering
`className`	`string`	Additional CSS classes

Command items are automatically selected when navigating with keyboard and can be activated by pressing Enter.

Accessibility

Always include a DialogTitle when using CommandDialog for screen reader accessibility
Use the VisuallyHidden component if you want to hide the title visually
The command menu supports keyboard navigation with arrow keys and Enter to select