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.
Loading preview...
"use client";
import {
Bell,
Code,
HelpCircle,
MessageSquare,
Moon,
Settings,
Sun,
User,
} from "lucide-react";
import { useState } from "react";
import {
CommandPalette,
type CommandGroup,
} from "@/components/ui/command-palette";
const groups: CommandGroup[] = [
{
id: "general",
heading: "General",
items: [
{
id: "profile",
label: "Profile",
description: "View and edit your profile",
icon: User,
shortcut: ["⌘", "P"],
onSelect: () => {},
},
{
id: "notifications",
label: "Notifications",
description: "Manage notification preferences",
icon: Bell,
onSelect: () => {},
},
{
id: "settings",
label: "Settings",
description: "App settings and preferences",
icon: Settings,
shortcut: ["⌘", ","],
onSelect: () => {},
},
],
},
{
id: "support",
heading: "Support",
items: [
{
id: "help",
label: "Help Center",
description: "Find answers to common questions",
icon: HelpCircle,
onSelect: () => {},
},
{
id: "feedback",
label: "Send Feedback",
description: "Share your thoughts with us",
icon: MessageSquare,
onSelect: () => {},
},
{
id: "repo",
label: "Source Code",
description: "Browse the source repository",
icon: Code,
onSelect: () => {},
},
],
},
{
id: "theme",
heading: "Theme",
items: [
{
id: "light",
label: "Light Mode",
icon: Sun,
onSelect: () => {},
},
{
id: "dark",
label: "Dark Mode",
icon: Moon,
onSelect: () => {},
},
],
},
];
export default function CommandPaletteCustomDemo() {
const [open, setOpen] = useState(true);
return (
<div className="flex h-full w-full items-center justify-center">
<CommandPalette open={open} onOpenChange={setOpen} groups={groups} />
</div>
);
}
Part of Joly UI — browse the full library on 21st.dev.