Command Menu - HapplyUI

A command menu component with search input, grouped items, and keyboard navigation hints.

Installation

bunx @happlyui/cli@latest add command-menu

Dependencies

npm packages

cmdk
@radix-ui/react-dialog

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
polymorphic
tv
modal

Usage

import * as CommandMenu from "@/components/ui/command-menu"

<CommandMenu.Dialog open={open} onOpenChange={setOpen}>
  <CommandMenu.Input placeholder="Search..." />
  <CommandMenu.List>
    <CommandMenu.Group heading="Results">
      <CommandMenu.Item>Item</CommandMenu.Item>
    </CommandMenu.Group>
  </CommandMenu.List>
  <CommandMenu.Footer>Footer</CommandMenu.Footer>
</CommandMenu.Dialog>

Examples

Demo

Full command menu with search, tags, smart prompts, results, and keyboard navigation footer.

<CommandMenu.Dialog open={open} onOpenChange={setOpen}>
  <CommandMenu.Input placeholder="Search or jump to" />
  <CommandMenu.List>
    <CommandMenu.Group heading="Smart Prompt Examples">
      <CommandMenu.Item>
        <CommandMenu.ItemIcon as={RiSparklingLine} />
        Filter your transactions
      </CommandMenu.Item>
    </CommandMenu.Group>
  </CommandMenu.List>
  <CommandMenu.Footer>
    <CommandMenu.FooterKeyBox>...</CommandMenu.FooterKeyBox>
    Navigate
  </CommandMenu.Footer>
</CommandMenu.Dialog>

API Reference

CommandMenu.Dialog

The command menu dialog container built on Modal and cmdk Command.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`overlayClassName`	`string`	-	Additional classes for the overlay

CommandMenu.DialogTitle

Accessible title for the command menu dialog. Alias for Modal.Title.

Prop	Type	Default	Description

CommandMenu.DialogDescription

Accessible description for the command menu dialog. Alias for Modal.Description.

Prop	Type	Default	Description

CommandMenu.Input

Search input field with styled placeholder transitions.

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text for the input

CommandMenu.List

Scrollable list container for command items.

Prop	Type	Default	Description

CommandMenu.Group

Groups related command items with an optional heading.

Prop	Type	Default	Description
`heading`	`string`	-	Group heading text

CommandMenu.Item

A selectable command item with size variants.

Prop	Type	Default	Description
`size`	`'small' \| 'medium'`	`'small'`	The size of the item

CommandMenu.ItemIcon

Icon displayed inside a command item.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render

CommandMenu.Footer

Footer area for keyboard navigation hints.

Prop	Type	Default	Description

CommandMenu.FooterKeyBox

Styled keyboard key indicator box.

Prop	Type	Default	Description