Back to components
Playground

Command Palette Demo

Cmd ⌘ + K (Mac) or Ctrl + K (Windows / Linux) to open the command palette.

Ideas to improve:

  • Add projects/components to search
  • Focus input with /, close palette with Esc
  • Feed commands dynamically from JSON/config

Command list

Home
H
Components Playground
C
Updates / Announcements
Image Converter
Notification Demo
Theme: System / Light / Dark
T
Light theme
Dark theme
GitHub: aqiray
Show notifications (mock)

Usage Examples

Basic CommandPalette

"use client";

import { useState } from "react";
import { CommandPalette, type CommandItem } from "@/components/command-palette";

const commands: CommandItem[] = [
  {
    id: "home",
    label: "Home",
    group: "Navigation",
    href: "/",
    icon: Home,
  },
  {
    id: "about",
    label: "About",
    group: "Navigation",
    href: "/about",
    icon: User,
  },
];

export default function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <CommandPalette
      commands={commands}
      open={open}
      onOpenChange={setOpen}
    />
  );
}

CommandPalette with Shortcut

<CommandPalette
  commands={commands}
  open={open}
  onOpenChange={setOpen}
  enableShortcut
/>