ark-cmdk

Purpose

ark-cmdk is a small, data-driven command menu for React-compatible apps built on Ark UI.

It ships one first-class API for:

• inline command menus with Command.Root
• modal command palettes with Command.Dialog
• explicit item identity, search ranking, and active-item state

Installation

pnpm add ark-cmdk react react-dom

ark-cmdk targets browser-side CSR, ESM, and React-compatible runtimes that support Ark UI's React API surface, including React 18+ and preact/compat.

Quick Example

import { Command } from 'ark-cmdk'

const items = [
  { id: 'open', label: 'Open File' },
  { id: 'save', label: 'Save File' },
]

export function Example() {
  return (
    <Command.Root
      itemToString={(item) => item.label}
      itemToValue={(item) => item.id}
      items={items}
      label="Command Menu"
    >
      <Command.Input placeholder="Search commands..." />
      <Command.List empty={<div>No results.</div>}>
        {(item) => <div>{item.label}</div>}
      </Command.List>
    </Command.Root>
  )
}

Documentation Map

• Concepts and recommended patterns: docs/context.md
• Inline usage example: examples/inline.tsx
• Dialog usage example: examples/dialog.tsx
• Controlled state example: examples/controlled-state.tsx
• Exact exported signatures: dist/index.d.mts
• API contract: docs/v0.1-api.md