Command Menu

Component 37

About

Launch a set of actions as a full-screen overlay.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Command Menu to your project and fits it to your theme.

Code

How Command Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@/components/ui/button-1";
import { CommandMenu } from "@/components/ui/command-menu";
import React, { useState } from "react";

export default function DefaultDemo() {
  const [open, setOpen] = useState<boolean>(false);

  function callback(): void {
    // no op
  }

  return (
    <>
        <Button onClick={() => setOpen(true)}>Open Command Menu</Button>
        <CommandMenu.Root open={open} setOpen={setOpen}>
          <CommandMenu.Input placeholder="What do you need?" />
          <CommandMenu.List>
            <CommandMenu.Item callback={callback}>Item 1</CommandMenu.Item>
            <CommandMenu.Item callback={callback}>Item 2</CommandMenu.Item>
            <CommandMenu.Item callback={callback}>Item 3</CommandMenu.Item>
            <CommandMenu.Group heading="Group 1">
              <CommandMenu.Item callback={callback}>
                Grouped Item 1
              </CommandMenu.Item>
              <CommandMenu.Item callback={callback}>
                Grouped Item 2
              </CommandMenu.Item>
            </CommandMenu.Group>
          </CommandMenu.List>
        </CommandMenu.Root>
    </>
  );
}