Getting Started

Get cmdk-engine running in your React project in under 5 minutes.

Installation

bash
npm install cmdk-engine cmdk react react-dom

Or with other package managers:

bash
bun add cmdk-engine cmdk
pnpm add cmdk-engine cmdk
yarn add cmdk-engine cmdk

1. Add the Provider

Wrap your app with CommandEngineProvider. This initializes the command registry, search engine, and frecency tracker.

App.tsx
import { CommandEngineProvider } from 'cmdk-engine/react'

function App() {
  return (
    <CommandEngineProvider config={{
      synonyms: {
        billing: ['money', 'payment', 'credits'],
      },
      onSelect: (item) => {
        if (item.href) navigate(item.href)
        if (item.action) item.action(item)
      },
      frecency: { showRecent: true },
    }}>
      <YourApp />
    </CommandEngineProvider>
  )
}

2. Register Commands

Use useCommandRegister to register commands from any component. Commands are automatically cleaned up when the component unmounts.

BillingPage.tsx
import { useCommandRegister } from 'cmdk-engine/react'
import { CreditCard } from 'lucide-react'

function BillingPage() {
  useCommandRegister([{
    id: 'billing-overview',
    label: 'Billing Overview',
    href: '/billing/overview',
    keywords: ['balance', 'credits'],
    group: 'Billing',
    icon: <CreditCard size={16} />,
  }])

  return <div>...</div>
}

3. Add the Command Palette

Use the pre-wired cmdk adapter or build your own UI with hooks.

CommandMenu.tsx
import { CommandPalette } from 'cmdk-engine/adapters/cmdk'

function CommandMenu() {
  return (
    <CommandPalette
      dialog
      placeholder="Search commands..."
      onSelect={(item) => {
        if (item.href) navigate(item.href)
      }}
    />
  )
}

4. Add Keyboard Shortcut

tsx
import { useCommandPaletteShortcut } from 'cmdk-engine/adapters/cmdk'

function App() {
  useCommandPaletteShortcut('k') // Cmd+K / Ctrl+K
  return <YourApp />
}

Next Steps

NextAPI Reference