Component

Command Menu

A keyboard-friendly command palette for docs search, navigation, and app commands.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { CommandMenu } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/command-menu.json

Copied source import

code

import "@/styles/axie.css";import { CommandMenu } from "@/components/axie/command-menu";

Prefer @axie/command-menu? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { CommandMenu } from "axie-ui";export function Example() {  return (    <CommandMenu      items={items}      open={open}      onOpenChange={setOpen}      onSelect={handleSelect}    />  );}

Accessibility

Open the menu with a keyboard shortcut and keep Escape available to close it.
Use `role="dialog"` for the overlay and focus the search input on open.
Return focus to the trigger after selection or dismissal.

API Reference

Prop	Type	Default	Description
open	boolean	-	Controls menu visibility.
onOpenChange	(open: boolean) => void	-	Called when the menu should open or close.
items	CommandMenuItem[]	-	Searchable command list.
onSelect	(item: CommandMenuItem) => void	-	Called when the user chooses an item.