+ Kit command palette system

Preact

Preact Integration

@cmd-kit/preact mirrors the React-facing API while targeting Preact.

Install

Package manager 
npm install @cmd-kit/preact

Basic usage

import { CommandPalette } from "@cmd-kit/preact";

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

export function Example() {
  return <CommandPalette sections={sections} title="Project commands" />;
}

Configuration surface

Icons and item layout

<CommandPalette
  sections={sections}
  renderItem={(item, active) => (
    <div className={active ? "palette-row is-active" : "palette-row"}>
      <MyIcon name={item.id} />
      <span>{item.title}</span>
    </div>
  )}
  title="Project commands"
/>

Theme example

<CommandPalette
  sections={sections}
  theme={{
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#12b5e5", backgroundColor: "#0f1720" }
  }}
  title="Project commands"
/>

Add a new command

Add a new option by appending a new item in your section. 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"
/>

FAQ

Is the Preact API intentionally close to React?

Yes. The adapter mirrors the React-facing API so teams can share patterns and configuration.

Do I need React compatibility aliases to use it?

No. Use @cmd-kit/preact directly with Preact in your project.

Can I still use async loading and recents?

Yes. source and recents are available in the Preact adapter.

How do I disable recent commands in Preact?

Keep recents undefined (default off) or pass recents={false}.

How do I replace the default item UI?

Use renderItem for full row ownership or renderers for targeted render overrides.

When is Core a better fit than the Preact adapter?

When your product requires UI behavior that goes beyond the packaged component boundaries.