Command Palette

A ⌘K-style launcher: a modal Dialog whose header is a search field and whose body is a fuzzy-filtered ListBox of commands. It composes three existing primitives — the Dialog shell (with its new header slot), the Input search field, and the ListBox option engine — behind one headless connectCommandPalette core.

Like the Combobox, the field keeps DOM focus and drives the list with aria-activedescendant (the ListBox’s focusStrategy="active-descendant", revealStrategy="deferred" modes). Arrow keys move the cursor without leaving the input; Enter runs the focused command and closes the palette. Unlike a combobox, nothing is “selected” — every row is an action (selectionMode="none"), so activating one fires onCommand and dismisses.

Default

Open the palette and type to filter. Matching is fuzzy — nf finds “New File” — and results rank best-match-first. Each command can carry a leading icon, extra keywords (matched but not shown), and a shortcut hint rendered on the trailing edge.

AstroReactSvelteVue

PreviewCode

---
import CommandPalette from "../command-palette.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "column", align: "start" })}>
  <Button id="astro-cmdp-default-trigger">Open command palette</Button>

  <CommandPalette
    id="astro-cmdp-default"
    items={[
      {
        id: "new-file",
        label: "New File",
        shortcut: ["⌘", "N"],
        keywords: ["create"],
      },
      { id: "open-file", label: "Open File…", shortcut: ["⌘", "O"] },
      {
        id: "settings",
        label: "Open Settings",
        shortcut: ["⌘", ","],
        keywords: ["preferences"],
      },
      { id: "profile", label: "View Profile" },
      { id: "theme", label: "Toggle Theme", keywords: ["dark", "light"] },
    ]}
  />
</div>

<script>
  document
    .getElementById("astro-cmdp-default-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-cmdp-default-dialog");
    });
</script>

import React, { useState, type JSX } from "react";
import { CommandPalette } from "../CommandPalette";
import { Button } from "@pindoba/react-button";
import type { Key } from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";
import {
  FilePlusIcon,
  FolderOpenIcon,
  SettingsIcon,
  UserIcon,
  MoonIcon,
} from "./_icons";

export default function Default(): JSX.Element {
  const [open, setOpen] = useState(false);
  const [lastRun, setLastRun] = useState<string | null>(null);

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Button onClick={() => setOpen(true)}>Open command palette</Button>
      {lastRun && (
        <span>
          Ran: <strong>{lastRun}</strong>
        </span>
      )}

      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        onCommand={(id: Key) => setLastRun(String(id))}
        items={[
          {
            id: "new-file",
            label: "New File",
            leading: <FilePlusIcon />,
            shortcut: ["⌘", "N"],
            keywords: ["create", "blank"],
          },
          {
            id: "open-file",
            label: "Open File…",
            leading: <FolderOpenIcon />,
            shortcut: ["⌘", "O"],
          },
          {
            id: "settings",
            label: "Open Settings",
            leading: <SettingsIcon />,
            shortcut: ["⌘", ","],
            keywords: ["preferences", "config"],
          },
          {
            id: "profile",
            label: "View Profile",
            leading: <UserIcon />,
          },
          {
            id: "theme",
            label: "Toggle Theme",
            leading: <MoonIcon />,
            keywords: ["dark", "light", "appearance"],
          },
        ]}
      />
    </div>
  );
}

<script lang="ts">
  import CommandPalette from "../command-palette.svelte";
  import Button from "@pindoba/svelte-button";
  import type { Key } from "@pindoba/core-command-palette";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideFilePlus from "@lucide/svelte/icons/file-plus";
  import LucideFolderOpen from "@lucide/svelte/icons/folder-open";
  import LucideSettings from "@lucide/svelte/icons/settings";
  import LucideUser from "@lucide/svelte/icons/user";
  import LucideMoon from "@lucide/svelte/icons/moon";

  let open = $state(false);
  let lastRun = $state<string | null>(null);
</script>

{#snippet newFileIcon()}<LucideFilePlus size={16} />{/snippet}
{#snippet openIcon()}<LucideFolderOpen size={16} />{/snippet}
{#snippet settingsIcon()}<LucideSettings size={16} />{/snippet}
{#snippet profileIcon()}<LucideUser size={16} />{/snippet}
{#snippet themeIcon()}<LucideMoon size={16} />{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Button onclick={() => (open = true)}>Open command palette</Button>
  {#if lastRun}<span>Ran: <strong>{lastRun}</strong></span>{/if}

  <CommandPalette
    bind:open
    onCommand={(id: Key) => (lastRun = String(id))}
    items={[
      {
        id: "new-file",
        label: "New File",
        leading: newFileIcon,
        shortcut: ["⌘", "N"],
        keywords: ["create", "blank"],
      },
      {
        id: "open-file",
        label: "Open File…",
        leading: openIcon,
        shortcut: ["⌘", "O"],
      },
      {
        id: "settings",
        label: "Open Settings",
        leading: settingsIcon,
        shortcut: ["⌘", ","],
        keywords: ["preferences", "config"],
      },
      {
        id: "profile",
        label: "View Profile",
        leading: profileIcon,
      },
      {
        id: "theme",
        label: "Toggle Theme",
        leading: themeIcon,
        keywords: ["dark", "light", "appearance"],
      },
    ]}
  />
</div>

<script setup lang="ts">
import { ref, h } from "vue";
import { CommandPalette } from "@pindoba/vue-command-palette";
import { Button } from "@pindoba/vue-button";
import type { Key } from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";
import { FilePlus, FolderOpen, Settings, User, Moon } from "./_icons";

const open = ref(false);
const lastRun = ref<string | null>(null);

const items = [
  {
    id: "new-file",
    label: "New File",
    leading: h(FilePlus),
    shortcut: ["⌘", "N"],
    keywords: ["create", "blank"],
  },
  {
    id: "open-file",
    label: "Open File…",
    leading: h(FolderOpen),
    shortcut: ["⌘", "O"],
  },
  {
    id: "settings",
    label: "Open Settings",
    leading: h(Settings),
    shortcut: ["⌘", ","],
    keywords: ["preferences", "config"],
  },
  {
    id: "profile",
    label: "View Profile",
    leading: h(User),
  },
  {
    id: "theme",
    label: "Toggle Theme",
    leading: h(Moon),
    keywords: ["dark", "light", "appearance"],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Button @click="open = true">Open command palette</Button>
    <span v-if="lastRun"
      >Ran: <strong>{{ lastRun }}</strong></span
    >

    <CommandPalette
      :open="open"
      :onOpenChange="(value: boolean) => (open = value)"
      :onCommand="(id: Key) => (lastRun = String(id))"
      :items="items"
    />
  </div>
</template>

Grouped commands

Group commands into sections with { type: "section", title, items }. Sections render as labelled groups while the query is empty; once you start typing, results flatten and rank globally so the strongest match is always the top row — the norm for a command palette.

AstroReactSvelteVue

PreviewCode

---
import CommandPalette from "../command-palette.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "column", align: "start" })}>
  <Button id="astro-cmdp-grouped-trigger">Open palette</Button>

  <CommandPalette
    id="astro-cmdp-grouped"
    items={[
      {
        id: "navigation",
        type: "section",
        title: "Navigation",
        items: [
          { id: "go-home", label: "Go to Home", shortcut: "g h" },
          { id: "go-inbox", label: "Go to Inbox", shortcut: "g i" },
          { id: "go-calendar", label: "Go to Calendar", shortcut: "g c" },
        ],
      },
      {
        id: "actions",
        type: "section",
        title: "Actions",
        items: [
          { id: "archive", label: "Archive", shortcut: "e" },
          { id: "share", label: "Share…" },
          { id: "delete", label: "Delete", shortcut: ["⌘", "⌫"] },
        ],
      },
    ]}
  />
</div>

<script>
  document
    .getElementById("astro-cmdp-grouped-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-cmdp-grouped-dialog");
    });
</script>

import React, { useState, type JSX } from "react";
import { CommandPalette } from "../CommandPalette";
import { Button } from "@pindoba/react-button";
import type {
  Key,
  CommandPaletteNodeInput,
} from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";
import {
  HomeIcon,
  InboxIcon,
  CalendarIcon,
  ArchiveIcon,
  ShareIcon,
  TrashIcon,
} from "./_icons";

export default function Grouped(): JSX.Element {
  const [open, setOpen] = useState(false);
  const [lastRun, setLastRun] = useState<string | null>(null);

  const items: CommandPaletteNodeInput[] = [
    {
      id: "navigation",
      type: "section",
      title: "Navigation",
      items: [
        {
          id: "go-home",
          label: "Go to Home",
          leading: <HomeIcon />,
          shortcut: "g h",
        },
        {
          id: "go-inbox",
          label: "Go to Inbox",
          leading: <InboxIcon />,
          shortcut: "g i",
        },
        {
          id: "go-calendar",
          label: "Go to Calendar",
          leading: <CalendarIcon />,
          shortcut: "g c",
        },
      ],
    },
    {
      id: "actions",
      type: "section",
      title: "Actions",
      items: [
        {
          id: "archive",
          label: "Archive",
          leading: <ArchiveIcon />,
          shortcut: "e",
        },
        { id: "share", label: "Share…", leading: <ShareIcon /> },
        {
          id: "delete",
          label: "Delete",
          leading: <TrashIcon />,
          shortcut: ["⌘", "⌫"],
        },
      ],
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Button onClick={() => setOpen(true)}>Open palette</Button>
      {lastRun && (
        <span>
          Ran: <strong>{lastRun}</strong>
        </span>
      )}

      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        onCommand={(id: Key) => setLastRun(String(id))}
        items={items}
      />
    </div>
  );
}

<script lang="ts">
  import CommandPalette from "../command-palette.svelte";
  import Button from "@pindoba/svelte-button";
  import type {
    Key,
    CommandPaletteNodeInput,
  } from "@pindoba/core-command-palette";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideHome from "@lucide/svelte/icons/home";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideCalendar from "@lucide/svelte/icons/calendar";
  import LucideTrash from "@lucide/svelte/icons/trash-2";
  import LucideArchive from "@lucide/svelte/icons/archive";
  import LucideShare from "@lucide/svelte/icons/share-2";

  let open = $state(false);
  let lastRun = $state<string | null>(null);
</script>

{#snippet homeIcon()}<LucideHome size={16} />{/snippet}
{#snippet inboxIcon()}<LucideInbox size={16} />{/snippet}
{#snippet calendarIcon()}<LucideCalendar size={16} />{/snippet}
{#snippet archiveIcon()}<LucideArchive size={16} />{/snippet}
{#snippet shareIcon()}<LucideShare size={16} />{/snippet}
{#snippet trashIcon()}<LucideTrash size={16} />{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Button onclick={() => (open = true)}>Open palette</Button>
  {#if lastRun}<span>Ran: <strong>{lastRun}</strong></span>{/if}

  <CommandPalette
    bind:open
    onCommand={(id: Key) => (lastRun = String(id))}
    items={[
      {
        id: "navigation",
        type: "section",
        title: "Navigation",
        items: [
          {
            id: "go-home",
            label: "Go to Home",
            leading: homeIcon,
            shortcut: "g h",
          },
          {
            id: "go-inbox",
            label: "Go to Inbox",
            leading: inboxIcon,
            shortcut: "g i",
          },
          {
            id: "go-calendar",
            label: "Go to Calendar",
            leading: calendarIcon,
            shortcut: "g c",
          },
        ],
      },
      {
        id: "actions",
        type: "section",
        title: "Actions",
        items: [
          {
            id: "archive",
            label: "Archive",
            leading: archiveIcon,
            shortcut: "e",
          },
          { id: "share", label: "Share…", leading: shareIcon },
          {
            id: "delete",
            label: "Delete",
            leading: trashIcon,
            shortcut: ["⌘", "⌫"],
          },
        ],
      },
    ] satisfies CommandPaletteNodeInput[]}
  />
</div>

<script setup lang="ts">
import { ref, h } from "vue";
import { CommandPalette } from "@pindoba/vue-command-palette";
import { Button } from "@pindoba/vue-button";
import type {
  Key,
  CommandPaletteNodeInput,
} from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";
import { Home, Inbox, Calendar, Archive, Share, Trash } from "./_icons";

const open = ref(false);
const lastRun = ref<string | null>(null);

const items: CommandPaletteNodeInput[] = [
  {
    id: "navigation",
    type: "section",
    title: "Navigation",
    items: [
      {
        id: "go-home",
        label: "Go to Home",
        leading: h(Home),
        shortcut: "g h",
      },
      {
        id: "go-inbox",
        label: "Go to Inbox",
        leading: h(Inbox),
        shortcut: "g i",
      },
      {
        id: "go-calendar",
        label: "Go to Calendar",
        leading: h(Calendar),
        shortcut: "g c",
      },
    ],
  },
  {
    id: "actions",
    type: "section",
    title: "Actions",
    items: [
      {
        id: "archive",
        label: "Archive",
        leading: h(Archive),
        shortcut: "e",
      },
      { id: "share", label: "Share…", leading: h(Share) },
      {
        id: "delete",
        label: "Delete",
        leading: h(Trash),
        shortcut: ["⌘", "⌫"],
      },
    ],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Button @click="open = true">Open palette</Button>
    <span v-if="lastRun"
      >Ran: <strong>{{ lastRun }}</strong></span
    >

    <CommandPalette
      :open="open"
      :onOpenChange="(value: boolean) => (open = value)"
      :onCommand="(id: Key) => (lastRun = String(id))"
      :items="items"
    />
  </div>
</template>

Async commands

Set isLoading while a command source is being fetched; the body shows a Loading spinner in place of results. The Svelte demo simulates a fetch on open, then swaps in the commands.

AstroReactSvelteVue

PreviewCode

---
import CommandPalette from "../command-palette.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";

// Static demo of the loading state — `isLoading` renders the spinner in place
// of results (an async source would flip this off once its commands arrive).
---

<div class={stack({ gap: "sm", direction: "column", align: "start" })}>
  <Button id="astro-cmdp-async-trigger">Open (loading state)</Button>

  <CommandPalette
    id="astro-cmdp-async"
    isLoading
    labels={{ placeholder: "Search deployments…" }}
    items={[
      { id: "deploy", label: "Deploy to Production", shortcut: ["⌘", "D"] },
      { id: "rollback", label: "Roll Back Last Deploy" },
      { id: "logs", label: "Open Logs" },
    ]}
  />
</div>

<script>
  document
    .getElementById("astro-cmdp-async-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-cmdp-async-dialog");
    });
</script>

import React, { useState, type JSX } from "react";
import { CommandPalette } from "../CommandPalette";
import { Button } from "@pindoba/react-button";
import type {
  Key,
  CommandPaletteNodeInput,
} from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";

const ALL: CommandPaletteNodeInput[] = [
  { id: "deploy", label: "Deploy to Production", shortcut: ["⌘", "D"] },
  { id: "rollback", label: "Roll Back Last Deploy" },
  { id: "logs", label: "Open Logs", keywords: ["console", "output"] },
  { id: "restart", label: "Restart Service" },
  { id: "scale", label: "Scale Instances" },
];

export default function Async(): JSX.Element {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState<CommandPaletteNodeInput[]>([]);
  const [lastRun, setLastRun] = useState<string | null>(null);

  // Simulate fetching the command list when the palette opens.
  function openPalette() {
    setOpen(true);
    setLoading(true);
    setItems([]);
    setTimeout(() => {
      setItems(ALL);
      setLoading(false);
    }, 900);
  }

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Button onClick={openPalette}>Open (async load)</Button>
      {lastRun && (
        <span>
          Ran: <strong>{lastRun}</strong>
        </span>
      )}

      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        items={items}
        isLoading={loading}
        labels={{ placeholder: "Search deployments…" }}
        onCommand={(id: Key) => setLastRun(String(id))}
      />
    </div>
  );
}

<script lang="ts">
  import CommandPalette from "../command-palette.svelte";
  import Button from "@pindoba/svelte-button";
  import type {
    Key,
    CommandPaletteNodeInput,
  } from "@pindoba/core-command-palette";
  import { stack } from "@pindoba/styled-system/patterns";

  const ALL: CommandPaletteNodeInput[] = [
    { id: "deploy", label: "Deploy to Production", shortcut: ["⌘", "D"] },
    { id: "rollback", label: "Roll Back Last Deploy" },
    { id: "logs", label: "Open Logs", keywords: ["console", "output"] },
    { id: "restart", label: "Restart Service" },
    { id: "scale", label: "Scale Instances" },
  ];

  let open = $state(false);
  let loading = $state(false);
  let items = $state<CommandPaletteNodeInput[]>([]);
  let lastRun = $state<string | null>(null);

  // Simulate fetching the command list when the palette opens.
  function openPalette() {
    open = true;
    loading = true;
    items = [];
    setTimeout(() => {
      items = ALL;
      loading = false;
    }, 900);
  }
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Button onclick={openPalette}>Open (async load)</Button>
  {#if lastRun}<span>Ran: <strong>{lastRun}</strong></span>{/if}

  <CommandPalette
    bind:open
    {items}
    isLoading={loading}
    labels={{ placeholder: "Search deployments…" }}
    onCommand={(id: Key) => (lastRun = String(id))}
  />
</div>

<script setup lang="ts">
import { ref } from "vue";
import { CommandPalette } from "@pindoba/vue-command-palette";
import { Button } from "@pindoba/vue-button";
import type {
  Key,
  CommandPaletteNodeInput,
} from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";

const ALL: CommandPaletteNodeInput[] = [
  { id: "deploy", label: "Deploy to Production", shortcut: ["⌘", "D"] },
  { id: "rollback", label: "Roll Back Last Deploy" },
  { id: "logs", label: "Open Logs", keywords: ["console", "output"] },
  { id: "restart", label: "Restart Service" },
  { id: "scale", label: "Scale Instances" },
];

const open = ref(false);
const loading = ref(false);
const items = ref<CommandPaletteNodeInput[]>([]);
const lastRun = ref<string | null>(null);

// Simulate fetching the command list when the palette opens.
function openPalette() {
  open.value = true;
  loading.value = true;
  items.value = [];
  setTimeout(() => {
    items.value = ALL;
    loading.value = false;
  }, 900);
}
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Button @click="openPalette">Open (async load)</Button>
    <span v-if="lastRun"
      >Ran: <strong>{{ lastRun }}</strong></span
    >

    <CommandPalette
      :open="open"
      :onOpenChange="(value: boolean) => (open = value)"
      :items="items"
      :isLoading="loading"
      :labels="{ placeholder: 'Search deployments…' }"
      :onCommand="(id: Key) => (lastRun = String(id))"
    />
  </div>
</template>

Global hotkey

Set hotkey to register a global open shortcut — true binds ⌘K / Ctrl+K, or pass a key string (still requires ⌘/Ctrl). Leave it off (the default) to control open yourself (a trigger button, a menu item, your own key handler).

AstroReactSvelteVue

PreviewCode

Press ⌘ K / Ctrl K to open the palette.

---
import CommandPalette from "../command-palette.astro";
import Badge from "@pindoba/astro-badge";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "column", align: "start" })}>
  <span>
    Press <Badge size="sm">⌘ K</Badge> / <Badge size="sm">Ctrl K</Badge> to open the
    palette.
  </span>

  <CommandPalette
    id="astro-cmdp-hotkey"
    hotkey
    items={[
      { id: "search", label: "Search Everywhere", shortcut: ["⌘", "P"] },
      { id: "command", label: "Run Command", shortcut: ["⌘", "⇧", "P"] },
      { id: "goto", label: "Go to Line", shortcut: ["⌘", "G"] },
      { id: "format", label: "Format Document", shortcut: ["⌥", "⇧", "F"] },
    ]}
  />
</div>

Press ⌘ K / Ctrl K to open the palette.

import React, { useState, type JSX } from "react";
import { CommandPalette } from "../CommandPalette";
import { Badge } from "@pindoba/react-badge";
import type { Key } from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";

export default function Hotkey(): JSX.Element {
  const [open, setOpen] = useState(false);
  const [lastRun, setLastRun] = useState<string | null>(null);

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <span>
        Press <Badge size="sm">⌘ K</Badge> / <Badge size="sm">Ctrl K</Badge> to
        open the palette.
      </span>
      {lastRun && (
        <span>
          Ran: <strong>{lastRun}</strong>
        </span>
      )}

      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        hotkey
        onCommand={(id: Key) => setLastRun(String(id))}
        items={[
          { id: "search", label: "Search Everywhere", shortcut: ["⌘", "P"] },
          { id: "command", label: "Run Command", shortcut: ["⌘", "⇧", "P"] },
          { id: "goto", label: "Go to Line", shortcut: ["⌘", "G"] },
          { id: "format", label: "Format Document", shortcut: ["⌥", "⇧", "F"] },
        ]}
      />
    </div>
  );
}

Press ⌘ K / Ctrl K to open the palette.

<script lang="ts">
  import CommandPalette from "../command-palette.svelte";
  import Badge from "@pindoba/svelte-badge";
  import type { Key } from "@pindoba/core-command-palette";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
  let lastRun = $state<string | null>(null);
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <span>
    Press <Badge size="sm">⌘ K</Badge> / <Badge size="sm">Ctrl K</Badge> to open the
    palette.
  </span>
  {#if lastRun}<span>Ran: <strong>{lastRun}</strong></span>{/if}

  <CommandPalette
    bind:open
    hotkey
    onCommand={(id: Key) => (lastRun = String(id))}
    items={[
      { id: "search", label: "Search Everywhere", shortcut: ["⌘", "P"] },
      { id: "command", label: "Run Command", shortcut: ["⌘", "⇧", "P"] },
      { id: "goto", label: "Go to Line", shortcut: ["⌘", "G"] },
      { id: "format", label: "Format Document", shortcut: ["⌥", "⇧", "F"] },
    ]}
  />
</div>

Press ⌘ K / Ctrl K to open the palette.

<script setup lang="ts">
import { ref } from "vue";
import { CommandPalette } from "@pindoba/vue-command-palette";
import { Badge } from "@pindoba/vue-badge";
import type { Key } from "@pindoba/core-command-palette";
import { stack } from "@pindoba/styled-system/patterns";

const open = ref(false);
const lastRun = ref<string | null>(null);

const items = [
  { id: "search", label: "Search Everywhere", shortcut: ["⌘", "P"] },
  { id: "command", label: "Run Command", shortcut: ["⌘", "⇧", "P"] },
  { id: "goto", label: "Go to Line", shortcut: ["⌘", "G"] },
  { id: "format", label: "Format Document", shortcut: ["⌥", "⇧", "F"] },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <span>
      Press <Badge size="sm">⌘ K</Badge> / <Badge size="sm">Ctrl K</Badge> to
      open the palette.
    </span>
    <span v-if="lastRun"
      >Ran: <strong>{{ lastRun }}</strong></span
    >

    <CommandPalette
      :open="open"
      :onOpenChange="(value: boolean) => (open = value)"
      hotkey
      :onCommand="(id: Key) => (lastRun = String(id))"
      :items="items"
    />
  </div>
</template>

Custom filtering

The built-in fuzzy matcher (filter={true}, the default) ranks by match quality. To plug in your own ranking — or to drive results from a server — pass a filter function (command, query) => number | boolean | null: return a score (higher ranks first), true/false to keep/drop without ranking, or null to drop. Pass filter={false} to disable client filtering entirely and feed pre-filtered items yourself.

#Default

#Grouped commands

#Async commands

#Global hotkey

#Custom filtering

Default

Grouped commands

Async commands

Global hotkey

Custom filtering