A keyboard-driven ⌘K search dialog for quickly finding and running commands, with fuzzy search, grouped results, nested sub-menus, recent items and a loading state.
"use client";
import { useState } from "react";
import {
CommandPalette,
type CommandGroup,
} from "@/components/ui/command-palette";
import {
Calendar,
CreditCard,
FileText,
Home,
Mail,
Plus,
Search,
Settings,
User,
LogOut,
} from "lucide-react";
const groups: CommandGroup[] = [
{
id: "navigation",
heading: "Navigation",
items: [
{ id: "home", label: "Home", icon: Home, shortcut: ["G", "H"] },
{ id: "search", label: "Search", icon: Search, shortcut: ["G", "S"] },
{ id: "calendar", label: "Calendar", icon: Calendar },
{ id: "mail", label: "Mail", icon: Mail },
],
},
{
id: "actions",
heading: "Actions",
items: [
{
id: "new-file",
label: "New File",
icon: FileText,
shortcut: ["⌘", "N"],
},
{ id: "new-item", label: "New Item", icon: Plus },
{ id: "billing", label: "Billing", icon: CreditCard },
],
},
{
id: "account",
heading: "Account",
items: [
{ id: "profile", label: "Profile", icon: User },
{ id: "settings", label: "Settings", icon: Settings },
{ id: "logout", label: "Log out", icon: LogOut },
],
},
];
export default function Demo() {
const [open, setOpen] = useState(true);
return (
<div className="flex h-screen w-full items-start justify-center pt-24">
<CommandPalette open={open} onOpenChange={setOpen} groups={groups} />
</div>
);
}
Loading preview...
Part of Joly UI — browse the full library on 21st.dev.