💠 Command

Fast, composable, unstyled command menu for React.

Usage

The Command Menu component is a specialized interface element that provides users with a quick and keyboard-driven way to execute commands within an application.

It's inspired by the command palettes found in many development environments and productivity software, allowing users to perform actions without navigating through menus or using a mouse.

When to use

• Power user features: Implement a Command Menu to provide power users with a fast way to access functionality without lifting their hands from the keyboard.
• Efficient command execution: Employ a Command Menu in applications where users need to quickly execute commands or actions without sifting through nested menus.
• Enhanced user workflows: Utilize a Command Menu to enhance workflows in complex applications by allowing users to activate features or navigate to different sections more efficiently.
• Accessibility improvement: A well-designed Command Menu can also serve as an accessibility feature, helping users who prefer or require keyboard-only navigation.

Avoid using a Command Menu for actions that require more context or where a visual interface is necessary for clarity. Do not overcrowd the Command Menu with too many commands or options, as this can make it difficult for users to find what they need quickly. Ensure the Command Menu does not become a crutch for poor UI design elsewhere in the application; it should complement and enhance the existing user interface, not replace it.

About

The <Command /> component uses the cmdk (opens in a new tab) component by pacocoursey (opens in a new tab).

Examples

Default

Dialog

To show the command menu in a dialog, use the <CommandDialog /> component.

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: