Astro

Astro Integration

@cmd-kit/astro is the Astro package for Cmd+kit. It renders the default command palette directly in Astro while keeping the same command model and customization surface used across adapters.

When to use the Astro package

• Use @cmd-kit/astro when Astro owns the page shell and you want the quickest packaged setup without React dependencies.
• Stay on the Astro package if your palette can be configured with serializable props such as sections, messages, theme, and recent-command settings.
• Move to @cmd-kit/core only when you need full custom rendering beyond the packaged Astro component.
• Use another framework adapter only if your product already uses that framework for interactive UI.

Install

npm install @cmd-kit/astro

Basic usage

---
import CommandPalette from "@cmd-kit/astro/component";

const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" }
    ]
  }
];
---

<CommandPalette sections={sections} title="Project commands" />

Runtime requirements

No React integration is required. Install @cmd-kit/astro in your Astro project and use the component directly.

Customization

The customization surface is the same one you already use in other adapters: sections, messages, theme (single or dual mode), recents, and reducedMotion.

---
import CommandPalette from "@cmd-kit/astro/component";

const sections = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "search-docs", title: "Search docs", href: "/docs" }
    ]
  }
];
---

<CommandPalette
  sections={sections}
  messages={{
    searchPlaceholder: "Search docs, pages, or actions",
    noResults: "No command matches this query."
  }}
  theme={{
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#12b5e5", backgroundColor: "#0f1720" }
  }}
  title="Project commands"
/>

Add a new command

Add a new option by creating a new item in your section list. shortcut is optional.

---
const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" },
      { id: "billing", title: "Billing", href: "/billing", shortcut: "mod+b" },
      { id: "support", title: "Support", href: "/support" }
    ]
  }
];
---

Recent commands

recents is optional and disabled by default. Enable with recents={true} or configure recents={{ limit, sectionTitle }}. Disable with recents={false}.

<CommandPalette
  sections={sections}
  recents={false}
  title="Project commands"
/>

When to move to Core

When you need callback-driven commands or a fully custom item renderer, move to @cmd-kit/core and implement your own UI layer. Keep @cmd-kit/astro for the packaged default experience.

FAQ