⚡ ComponentForge

Command menu

Overlays

⌘K-style palette. Modal shell (focus-trapped), fuzzy substring filtering over labels+keywords, grouped results and full keyboard control. This site's own search runs on it.

import { CommandMenu } from "@componentforge/react";

Examples

Command palette

Type to filter across groups; arrows move, Enter runs.

Accessibility

  • Input uses role="combobox" with aria-activedescendant pointing at role="option" items — DOM focus never leaves the input while navigating.
  • Visible groups get accessible group labels; empty state is announced by the live list region.
  • Autofocus lands on the input via [data-autofocus].

Keyboard interactions

KeyAction
↑ / ↓Move active item (wraps).
Home / EndFirst / last visible item.
EnterRun item action and close.
EscClose the menu.

API reference

Selected props — every component also spreads native HTML attributes.

PropTypeDefaultDescription
Item.labelstringFilterable text; also fallback display.
Item.keywordsstring""Extra filter-only terms.
Item.shortcutstringRendered as a <kbd> chip.
Item.onSelect() => voidInvoked after the menu closes.