Command

A powerful, composable command menu palette for searching data and triggering quick actions.

Most robust command palettes force you to install heavy third-party libraries like cmdk, which ship with massive virtualized lists and complex React state syncing. This CommandBlock achieves the exact same functionality using a 100% native, dependency-free DOM architecture. It handles keyboard navigation (up/down/enter), automatic empty-state detection, and dialog trapping entirely through efficient native DOM events and modern CSS :has() rules.

Type in any search box to filter — empty groups vanish on their own. ArrowUp / ArrowDown move the selection and Enter fires it.

Groups, separators & shortcuts

CommandSeparator divides groups; CommandShortcut right-aligns the hotkey.

Giveheading: to a CommandGroup to label the cluster — the whole group hides itself when every item filters out.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Command

npx shadcn@latest add @algorize-ui/command

components/custom/blocks/CommandBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Command needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Command dialog

Swap Command for CommandDialog to get the ⌘K overlay — try the shortcut.

open: is required on CommandDialog; it has no uncontrolled mode.
onOpenChange: fires on click-outside and on Escape, so it is where you close it.

External filtering

SetshouldFilter{false}: to turn off the built-in filter when the results already come back filtered from an API.

Features

Learn about the Command palette's features, including fuzzy search, keyboard shortcuts, and nested group navigation.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`CommandDialog`	`open`	`boolean`	Required	Controls the visibility of the modal dialog overlay.
`CommandDialog`	`onOpenChange`	`(open: boolean) => void`	Required	Callback fired when the dialog is dismissed via a click-outside event or by pressing the Escape key.
`CommandGroup`	`heading`	`string`	`undefined`	Optional text label displayed directly above the clustered items. The entire group automatically hides if all its items are filtered out.
`CommandItem`	`value`	`string`	`undefined`	An explicit string used for fuzzy searching. If omitted, the component automatically falls back to searching the rendered `textContent` of the item.
`CommandItem`	`onSelect`	`(value: string) => void`	`undefined`	Callback fired when the item is clicked with the mouse or activated via the Enter key during keyboard navigation.
All Components	`className`	`string`	`undefined`	Standard Tailwind CSS overrides for customized styling, sizing, or spacing.