Keyboard-first command menu with a platform shortcut, nested pages, remembered recents and shortcut hints on each row.
import {
CommandPalette,
CommandPaletteDialog,
CommandPaletteEmpty,
CommandPaletteGroup,
CommandPaletteInput,
CommandPaletteItem,
CommandPaletteList,
CommandPalettePage,
CommandPaletteRecents,
CommandPaletteTrigger,
} from "@/components/ui/command-palette";
import {
FileText,
Folder,
Home,
Moon,
Settings,
Sun,
User,
} from "lucide-react";
export default function CommandPaletteDemo() {
return (
<div className="flex min-h-[420px] w-full flex-col items-center justify-center gap-3 bg-background p-8 text-foreground">
<CommandPalette recentsKey="command-palette-demo-recents">
<CommandPaletteTrigger>
<span>Search or jump to...</span>
</CommandPaletteTrigger>
<p className="text-xs text-muted-foreground">
Open it with the button, or the keyboard shortcut it shows.
</p>
<CommandPaletteDialog
title="Command Palette"
description="Search actions and pages"
>
<CommandPaletteInput />
<CommandPaletteList>
<CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
<CommandPaletteRecents>
{(recent) => (
<CommandPaletteItem
key={recent.id}
recentId={recent.id}
label={recent.label}
>
<FileText className="size-4" />
{recent.label}
</CommandPaletteItem>
)}
</CommandPaletteRecents>
<CommandPaletteGroup heading="Suggestions">
<CommandPaletteItem
recentId="home"
label="Go to Home"
shortcut="⌘H"
>
<Home className="size-4" />
Go to Home
</CommandPaletteItem>
<CommandPaletteItem
recentId="projects"
label="Open Projects"
shortcut="⌘P"
>
<Folder className="size-4" />
Open Projects
</CommandPaletteItem>
<CommandPaletteItem recentId="profile" label="View Profile">
<User className="size-4" />
View Profile
</CommandPaletteItem>
</CommandPaletteGroup>
<CommandPaletteGroup heading="Settings">
<CommandPaletteItem label="Theme" page="theme">
<Settings className="size-4" />
Theme
</CommandPaletteItem>
</CommandPaletteGroup>
</CommandPaletteList>
<CommandPalettePage name="theme">
<CommandPaletteList>
<CommandPaletteGroup heading="Theme">
<CommandPaletteItem recentId="theme-light" label="Light">
<Sun className="size-4" />
Light
</CommandPaletteItem>
<CommandPaletteItem recentId="theme-dark" label="Dark">
<Moon className="size-4" />
Dark
</CommandPaletteItem>
</CommandPaletteGroup>
</CommandPaletteList>
</CommandPalettePage>
</CommandPaletteDialog>
</CommandPalette>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.