Controls

Modern Command Palette

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

All components

or press ⌘K

Installation

ProRequires a Planes Pro license.

npx shadcn add @useplanes/modern-command-palette

Unlock with Planes Pro

$99 once · 54 Pro components · lifetime updates.

I have a license Get Pro

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

Examples

Supply your own commands

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

import type { ModernCommand } from "@/components/ui/ModernCommandPalette";

const commands: ModernCommand[] = [
  {
    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

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

import { useModernCommandPalette } from "@/components/ui/ModernCommandPalette";

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

<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.

<ModernCommandPalette
  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.