Search and run grouped actions with full keyboard navigation, a height animation between result sets, and reduced-motion support.
"use client";
import { Download, FilePlus2, FolderOpen, Settings, UserPlus } from "lucide-react";
import { useState } from "react";
import {
CommandMenu,
CommandMenuEmpty,
CommandMenuFooter,
CommandMenuGroup,
CommandMenuGroupLabel,
CommandMenuInput,
CommandMenuItem,
CommandMenuList,
CommandMenuShortcut,
} from "@/components/ui/command-menu";
export default function CommandMenuDemo() {
const [lastRun, setLastRun] = useState("Nothing yet");
return (
<div className="flex min-h-[480px] w-full items-center justify-center p-6">
<div className="grid w-full max-w-[560px] gap-3">
<CommandMenu variant="panel" label="Workspace commands">
<CommandMenuInput placeholder="Type a command or search…" />
<CommandMenuList>
<CommandMenuGroup>
<CommandMenuGroupLabel>Create</CommandMenuGroupLabel>
<CommandMenuItem value="New document" keywords={["file", "page"]} onSelect={() => setLastRun("New document")}>
<FilePlus2 size={16} aria-hidden="true" />
New document
<CommandMenuShortcut>⌘N</CommandMenuShortcut>
</CommandMenuItem>
<CommandMenuItem value="Invite teammate" keywords={["member", "user"]} onSelect={() => setLastRun("Invite teammate")}>
<UserPlus size={16} aria-hidden="true" />
Invite teammate
</CommandMenuItem>
</CommandMenuGroup>
<CommandMenuGroup>
<CommandMenuGroupLabel>Navigate</CommandMenuGroupLabel>
<CommandMenuItem value="Open recent project" onSelect={() => setLastRun("Open recent project")}>
<FolderOpen size={16} aria-hidden="true" />
Open recent project
<CommandMenuShortcut>⌘O</CommandMenuShortcut>
</CommandMenuItem>
<CommandMenuItem value="Workspace settings" keywords={["preferences"]} onSelect={() => setLastRun("Workspace settings")}>
<Settings size={16} aria-hidden="true" />
Workspace settings
<CommandMenuShortcut>⌘,</CommandMenuShortcut>
</CommandMenuItem>
<CommandMenuItem value="Export workspace" keywords={["download"]} disabled>
<Download size={16} aria-hidden="true" />
Export workspace
<span className="ml-auto text-[11.5px] font-normal">Owners only</span>
</CommandMenuItem>
</CommandMenuGroup>
<CommandMenuEmpty>Try “settings” or “invite”, or press Esc to clear.</CommandMenuEmpty>
</CommandMenuList>
<CommandMenuFooter />
</CommandMenu>
<p className="m-0 text-center text-xs text-muted-foreground">Last command: {lastRun}</p>
</div>
</div>
);
}Part of Uai — browse the full library on 21st.dev.