@cmd-kit/preact

Preact adapter for Cmd+kit with the same UI and behavior baseline as @cmd-kit/react.

Website: https://cmd-kit.vercel.app/
Docs: https://cmd-kit.vercel.app/docs/preact

🌐 Language

• Español
• English

🇪🇸 Español

⚡ Instalación

npm install @cmd-kit/preact preact

✅ Qué incluye

• CommandPalette para Preact.
• useCommandPalette con API equivalente a React.
• Mismos defaults visuales/comportamiento que React.
• Soporte de theme simple o dual (light/dark).
• Atajos, navegación por teclado, anidado, async y recientes.

🚀 Uso rápido

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

export function App() {
  return <CommandPalette />;
}

🧩 Configuración base

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

const sections = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "overview", title: "Overview", shortcut: "mod+o" },
      { id: "projects", title: "Projects", shortcut: "mod+p" }
    ]
  }
];

export function App() {
  return <CommandPalette sections={sections} title="Command menu" />;
}

🎨 Personalización

Igual que React:

• theme
• reducedMotion (disable hover/motion animations)
• classNames
• renderers
• renderItem

Ejemplo de tema dual:

<CommandPalette
  sections={sections}
  theme={{
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
  }}
  title="Command menu"
/>

🛝 Integración desde Playground

1. Configura en playground.
2. Exporta target Preact.
3. Copia estructura (sections/items) y opcionales (messages, theme, recents, reducedMotion).
4. Integra en <CommandPalette />.

🤝 Contribuciones

PRs bienvenidas para bugs, mejoras de DX y parity entre adapters.

🇬🇧 English

⚡ Install

npm install @cmd-kit/preact preact

✅ What you get

• CommandPalette for Preact.
• useCommandPalette with React-like API.
• Same visual/behavior defaults as React.
• Supports single or dual theme mode (light/dark).
• Shortcuts, keyboard navigation, nested flows, async source, and recents.

🚀 Quick start

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

export function App() {
  return <CommandPalette />;
}

🎨 Customization

Same customization surface as React (theme, classNames, renderers, renderItem, reducedMotion).

Dual-theme example:

<CommandPalette
  sections={sections}
  theme={{
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
  }}
  title="Command menu"
/>

🛝 Playground integration

Use the Preact export target, then paste sections/items (+ optional messages, theme, recents, reducedMotion) into your integration.

🤝 Contributing

PRs are welcome for bugs, DX improvements, and adapter parity.

Portfolio: Fr4n0m → https://codebyfran.es