Components
Loading preview...
A command palette component with keyboard navigation, search, and shortcuts for quick actions and navigation.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/command-menuimport * as React from "react";
import {
CommandMenu,
CommandMenuTrigger,
CommandMenuContent,
CommandMenuInput,
CommandMenuList,
CommandMenuGroup,
CommandMenuItem,
CommandMenuSeparator,
useCommandMenuShortcut,
} from "@/components/ui/command-menu";
import { Button } from "@/components/ui/button";
import { Kbd } from "@/components/ui/kbd";
import {
Command,
Calendar,
User,
Settings,
Plus,
Upload,
Download
} from "lucide-react";
// Utility function to detect OS and return appropriate modifier key
const getModifierKey = () => {
if (typeof navigator === "undefined") return { key: "Ctrl", symbol: "Ctrl" };
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ||
navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
return isMac
? { key: "cmd", symbol: "⌘" }
: { key: "ctrl", symbol: "Ctrl" };
};
export default function DemoOne() {
const [open, setOpen] = React.useState(false);
useCommandMenuShortcut(() => setOpen(true));
return (
<CommandMenu open={open} onOpenChange={setOpen}>
<CommandMenuTrigger asChild>
<Button variant="outline" className="gap-2">
<Command size={16} />
Open Command Menu
<div className="ml-auto flex items-center gap-1">
<Kbd size="xs">{getModifierKey().symbol}</Kbd>
<Kbd size="xs">K</Kbd>
</div>
</Button>
</CommandMenuTrigger>
<CommandMenuContent>
<CommandMenuInput placeholder="Type a command or search..." />
<CommandMenuList>
<CommandMenuGroup heading="Suggestions">
<CommandMenuItem icon={<Calendar />} index={0}>
Calendar
</CommandMenuItem>
<CommandMenuItem icon={<User />} index={1}>
Search Users
</CommandMenuItem>
<CommandMenuItem icon={<Settings />} index={2}>
Settings
</CommandMenuItem>
</CommandMenuGroup>
<CommandMenuSeparator />
<CommandMenuGroup heading="Actions">
<CommandMenuItem icon={<Plus />} index={3} shortcut="cmd+n">
Create New
</CommandMenuItem>
<CommandMenuItem icon={<Upload />} index={4} shortcut="cmd+u">
Upload File
</CommandMenuItem>
<CommandMenuItem icon={<Download />} index={5} shortcut="cmd+d">
Download
</CommandMenuItem>
</CommandMenuGroup>
</CommandMenuList>
</CommandMenuContent>
</CommandMenu>
);
};