A searchable, keyboard-first command/navigation overlay (⌘K-style) for jumping to pages or running actions from a dialog with grouped, filterable results.
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
CommandPalette,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command-palette";
export default function CommandPaletteDemo() {
const [open, setOpen] = React.useState(false);
return (
<div className="flex min-h-[400px] w-full items-center justify-center p-10">
{!open && (
<Button onClick={() => setOpen(true)}>Open command palette</Button>
)}
<CommandPalette open={open} onOpenChange={setOpen} label="Command menu">
<CommandInput placeholder="Type a command or search…" />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Pages">
<CommandItem onSelect={() => setOpen(false)}>Overview</CommandItem>
<CommandItem onSelect={() => setOpen(false)}>Members</CommandItem>
<CommandItem onSelect={() => setOpen(false)}>Billing</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Actions">
<CommandItem onSelect={() => setOpen(false)}>
Invite member
<CommandShortcut>⌘I</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandPalette>
</div>
);
}