Command Menu

Copy<CommandMenu>
  <CommandMenuTrigger />
  <CommandMenuContent>
    <Command items={groupedItems}>
      <CommandInput />
      <CommandEmpty />
      <CommandScrollArea>
        <CommandList>
          <CommandGroup>
            <CommandGroupLabel />
            <CommandCollection>
              <CommandItem>
                <CommandShortcut />
              </CommandItem>
            </CommandCollection>
          </CommandGroup>
          <CommandSeparator />
        </CommandList>
      </CommandScrollArea>
    </Command>
    <CommandMenuFooter />
  </CommandMenuContent>
</CommandMenu>

Copy"use client";
 
import * as React from "react";
import {
  Command,
  CommandCollection,
  CommandEmpty,
  CommandGroup,
  CommandGroupLabel,
  CommandInput,
  CommandItem,
  CommandList,
  CommandMenu,
  CommandMenuContent,
  CommandMenuTrigger,
  CommandScrollArea,
} from "@/components/ui/command-menu";
import { Button } from "@/components/ui/button";
 
export function CommandMenuMinimal() {
  const [open, setOpen] = React.useState(false);
 
  return (
    <CommandMenu onOpenChange={setOpen} open={open}>
      <CommandMenuTrigger render={<Button variant="outline">Open</Button>} />
      <CommandMenuContent aria-label="Command menu">
        <Command items={groupedItems}>
          <CommandInput placeholder="Search..." />
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandScrollArea>
            <CommandList>
              {(group: Group) => (
                <CommandGroup items={group.items} key={group.value}>
                  <CommandGroupLabel>{group.value}</CommandGroupLabel>
                  <CommandCollection>
                    {(item: Item) => (
                      <CommandItem
                        key={item.value}
                        onClick={() => setOpen(false)}
                        value={item}
                      >
                        {item.label}
                      </CommandItem>
                    )}
                  </CommandCollection>
                </CommandGroup>
              )}
            </CommandList>
          </CommandScrollArea>
        </Command>
      </CommandMenuContent>
    </CommandMenu>
  );
}
 
type Item = { value: string; label: string };
type Group = { value: string; items: Item[] };
 
const groupedItems: Group[] = [
  {
    value: "Resources",
    items: [
      { label: "Documentation", value: "docs" },
      { label: "Components", value: "components" },
    ],
  },
  {
    value: "Actions",
    items: [{ label: "Settings", value: "settings" }],
  },
];

Copy<DialogViewport
  className={cn(
    "flex flex-col items-center justify-center",
    // add top padding to move the popup down
     "pt-[10dvh]",
  )}
>

Copy<DialogViewport className={cn("flex flex-col items-center", "pt-[10dvh]")} />

Copy"w-[min(40rem,calc(100vw-2rem))] animate-fade-zoom"

Copy"h-auto max-h-64 sm:max-h-96"

Copy<div className="h-auto max-h-80 overflow-y-auto">
  <CommandList>{/* items */}</CommandList>
</div>

Copyimport { AutocompleteInput } from "@/components/ui/autocomplete";
 
<Command items={groupedItems}>
  <AutocompleteInput className="border-b px-4 py-3" placeholder="Search..." />
</Command>

Copy"group/command-item ... data-[highlighted]:before:inset-x-3"