Command Menu

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { CommandMenu } from "@/components/ui/command-menu";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Search commands</Button>
      <CommandMenu
        open={open}
        onOpenChange={setOpen}
        groups={[
          {
            heading: "Project",
            items: [
              { id: "new", label: "New project", shortcut: "mod+n", onSelect: () => setOpen(false) },
              { id: "invite", label: "Invite a teammate", onSelect: () => setOpen(false) },
            ],
          },
        ]}
      />
    </>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

<button class="ml-button" type="button" data-variant="secondary" data-size="md"><span class="ml-button-label">Search commands</span></button>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

• kbd
• modal
• @mlola-ui/icons