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 { Moon, Palette, Shield, Sun, User } from "lucide-react";
const groups: CommandGroup[] = [
{
id: "appearance",
heading: "Appearance",
items: [
{ id: "light", label: "Light Mode", icon: Sun },
{ id: "dark", label: "Dark Mode", icon: Moon },
{ id: "theme", label: "Customize Theme", icon: Palette },
],
},
{
id: "security",
heading: "Security",
items: [
{ id: "privacy", label: "Privacy", icon: Shield },
{ id: "account", label: "Account", icon: User },
],
},
];
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.