Components

Command Palette

Pro

A nested-card command palette that springs open, staggers its groups with a blur-fade, and drives fully from the keyboard.

or press ⌘K

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/command-palette

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
// Cmd+K (and Ctrl+K) open the palette automatically.
// Pass your own commands, or omit to use the built-in demo set.
<CommandPalette commands={commands} />

Examples

Supply your own commands

The palette is data-driven. Pass an array of Command objects; each one renders an <a> (via href) or runs an action.

import type { Command } from "@/components/ui/CommandPalette";

const commands: Command[] = [
  {
    id: "home",
    title: "Home",
    group: "Views",
    shortcut: "H",
    href: "/",
  },
  {
    id: "theme",
    title: "Toggle Theme",
    group: "Settings",
    shortcut: "T",
    keepOpen: true,
    action: () => toggleTheme(),
  },
];

Open it from your own button

useCommandPalette binds Cmd+K for you and exposes open state you can drive manually.

import { useCommandPalette } from "@/components/ui/CommandPalette";

const { open, setOpen, toggle } = useCommandPalette();

<button onClick={toggle}>Search</button>

Offer an AI fallback

When a query returns no results, pass onAsk to surface an accented "Ask AI" row that forwards the query to your assistant.

<CommandPalette
  open={open}
  onClose={toggle}
  commands={commands}
  onAsk={(query) => startAssistant(query)}
/>

Use cases

  • App-wide search

    One Cmd+K entry point to jump to any page, record, or setting.

  • Action launcher

    Run commands (new doc, invite, toggle theme) without leaving the keyboard.

  • AI-assisted search

    Fall through to an assistant when nothing matches the typed query.

  • Portfolio navigation

    A polished, grouped navigator for a personal site or docs.