Command – React UI Component

Open in

A searchable command menu with a Page filter, keyboard navigation, shortcuts, and a sliding selection highlight. Choose All pages to search every command, or select a page category to filter the results. Search matches labels, categories, and keywords. Disabled commands remain visible and are skipped by keyboard navigation.

Click the ⌘ K button in the demo, or press ⌘ K / Ctrl K, to open the palette. Escape clears the search first, then closes the palette. A click outside or selecting a command also closes it and returns focus to the button.

Installation

Add the command component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/command.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

Use a client component when handling selections. Give each item a unique, stable id.

1"use client";
2
3import { Command } from "@/components/hangry-ui/components/command";
4
5export default function CommandMenu() {
6  return (
7    <Command
8      items={[
9        { id: "home", label: "Go home", group: "Navigation", keywords: ["dashboard"] },
10        { id: "settings", label: "Settings", group: "Account", shortcut: "⌘ ," },
11      ]}
12      onSelect={(item) => console.log(item.id)}
13    />
14  );
15}

Focus the search field, use ↑ and ↓ to move between enabled results, then press Enter to select. Escape clears the search. Shortcut labels are visual hints; bind application shortcuts in your own code. This is an inline menu and does not register a global keyboard shortcut or open a dialog.

Props

Prop	Type	Default	Description
`items`	`readonly CommandItem[]`	Example commands	Actions with unique IDs, labels, optional groups, keywords, shortcuts, and disabled states.
`onSelect`	`(item: CommandItem) => void`	—	Called when an enabled command is selected with Enter or a click.
`placeholder`	`string`	Type a command or search…	Search field placeholder.
`label`	`string`	Search commands	Accessible label for the search field.
`emptyMessage`	`string`	No commands found.	Message displayed when the search has no results.
`className`	`string`	—	Additional classes for the menu container.

Dependencies

lucide-react
Motion