Docs

Getting Started

Cmd+kit is installed from npm. Choose the package that matches your runtime, define your commands in code, and then customize the palette with messages, theme tokens, and rendering overrides.

What you install

@cmd-kit/react: ready-to-use React component and hook
@cmd-kit/vue: Vue component and composable integration
@cmd-kit/preact: Preact adapter with an API close to React
@cmd-kit/astro: Astro-first entry point for island-based integration
@cmd-kit/core: headless primitives plus framework-free browser runtime (createCommandPalette)

Choose the right package

React: use this if your application UI is React and you want the most complete packaged surface
Vue: use this if your application is Vue and you want slots plus Vue-first state handling
Preact: use this if you want the React-style API on a lighter runtime
Astro: use this if your app shell is Astro and you want a package designed for Astro islands
Core: use this if you need a fully custom UI or framework-free runtime integration

Install

npm install @cmd-kit/react

Open adapter documentation

Command model

The palette is built from sections. Each section contains items. An item can open a link, run a callback, or navigate into child sections.

const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      {
        id: "dashboard",
        title: "Dashboard",
        subtitle: "Open the main workspace",
        href: "/dashboard",
        shortcut: "G D"
      },
      {
        id: "settings",
        title: "Settings",
        children: [
          {
            id: "preferences",
            title: "Preferences",
            items: [
              { id: "theme", title: "Theme" },
              { id: "account", title: "Account" }
            ]
          }
        ]
      }
    ]
  }
];

First integration checklist

Choose the package that matches your UI runtime.
Install it with your package manager together with the peer dependencies it needs.
Start with one or two root sections and a handful of items.
Make sure links, callbacks, and nested sections behave correctly before styling heavily.
Then move to Customization for icons, styles, messages, and async data.

Recent commands

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

FAQ

Which package should I install if my app mixes multiple frameworks?

Install the adapter used by the UI tree that will render the palette. Use @cmd-kit/core only if you are building your own UI layer.

Do I need to install peer dependencies manually?

Yes. Install the adapter package together with the runtime your project already uses (React, Vue, Preact, or Astro).

Can I start with static sections and move to async data later?

Yes. You can begin with sections or items and later migrate to source without changing the command model.

Can I disable recent commands completely?

Yes. Do not pass recents (default is off) or pass recents={false} explicitly.

Is Cmd+kit suitable for production apps?

Yes, as long as you validate your command structure, keyboard flow, and app-specific behavior in your own environment before shipping.

When should I move from an adapter to Core?

Move to Core when you need complete control over rendering and interaction details that exceed the packaged component surface.