Why modern-cmdk?

Features

Quick Start

pnpm add modern-cmdk

npm create modern-cmdk

'use client';
import { Command } from 'modern-cmdk/react';
function CommandPalette() {
 return (
 <Command.Dialog>
 <Command.Input placeholder="Type a command..." />
 <Command.List>
 <Command.Empty>No results found.</Command.Empty>
 <Command.Group heading="Actions">
 <Command.Item value="copy" onSelect={() => copyToClipboard()}>
 <Command.Highlight>Copy to Clipboard</Command.Highlight>
 <Command.Shortcut>Mod+C</Command.Shortcut>
 </Command.Item>
 <Command.Item value="paste" onSelect={() => paste()}>
 <Command.Highlight>Paste</Command.Highlight>
 <Command.Shortcut>Mod+V</Command.Shortcut>
 </Command.Item>
 </Command.Group>
 <Command.Group heading="Navigation">
 <Command.Item value="settings" onSelect={() => navigate('/settings')}>
 Settings
 <Command.Badge>New</Command.Badge>
 </Command.Item>
 </Command.Group>
 </Command.List>
 <Command.Loading>Searching...</Command.Loading>
 </Command.Dialog>
 );
}

Packages

Architecture

+---------------------------------------------------------------+
| Your Application |
+---------------+---------------------------+-------------------+
 | |
+---------------v--------------+ +---------v---------+
| modern-cmdk/react | | Future: Svelte |
| | | / Vue / Solid |
| Command.Dialog | | / Vanilla |
| Command.Input | +-------------------+
| Command.List |
| Command.Item |
| CommandErrorBoundary |
| useCommandDevtools() |
+---------------+--------------+
 | useSyncExternalStore
 | useTransition
+---------------v----------------------------------------------+
| modern-cmdk (core) |
| |
| +-------------+ +-------------+ +------------------+ |
| | State | | Search | | Frecency | |
| | Machine | | Engine | | Engine | |
| | (Pure TS) | | (Pluggable) | | (Time Decay) | |
| +------+------+ +------+------+ +---------+--------+ |
| +------v----------------v------------------v---------+ |
| | Command Registry & Event Emitter | |
| +------+---------------------------------+-----------+ |
| +------v-----------------------+ +-------v-----------+ |
| | Keyboard Shortcut Registry | | Scheduler | |
| +------------------------------+ +--------------------+ |
+-------------------+------------------------------------------+
 | Optional
+-------------------v-------------------+
| modern-cmdk-search-wasm |
| Rust trigram index + scorer |
| Graceful TS fallback on failure |
+---------------------------------------+

Core API

import { createCommandMachine, itemId } from 'modern-cmdk';
using machine = createCommandMachine({
 items: [
 { id: itemId('copy'), value: 'Copy', shortcut: 'Mod+C', onSelect: () => copy() },
 { id: itemId('paste'), value: 'Paste', shortcut: 'Mod+V', onSelect: () => paste() },
 ],
 frecency: { enabled: true },
 loop: true,
});
machine.send({ type: 'SEARCH_CHANGE', query: 'cop' });
machine.send({ type: 'NAVIGATE', direction: 'next' });
machine.send({ type: 'ITEM_SELECT', id: itemId('copy') });
const unsubscribe = machine.subscribe(() => {
 console.log(machine.getState());
});
// Automatic cleanup via `using` -- no manual dispose needed

React Components

<Command> {/* Root -- state machine */}
 <Command.Input /> {/* Search input */}
 <Command.List> {/* Scrollable list -- auto-virtualization */}
 <Command.Empty /> {/* filteredCount === 0 */}
 <Command.Loading />{/* state.loading === true */}
 <Command.Group> {/* Heading + items */}
 <Command.Item> {/* Selectable item */}
 <Command.Highlight /> {/* Fuzzy match highlight */}
 <Command.Badge /> {/* Status badge */}
 <Command.Shortcut /> {/* Keyboard shortcut */}
 </Command.Item>
 </Command.Group>
 <Command.Separator />
 </Command.List>
</Command>
<Command.Dialog /> {/* Radix Dialog + overlay + portal */}
<Command.Page /> {/* Nested page navigation */}
<Command.AsyncItems /> {/* Suspense async loading */}

Performance

Head-to-Head vs cmdk

Absolute Performance

Feature Comparison

CSS Customization

[data-command-root] {
 --command-duration-enter: 200ms;
 --command-duration-exit: 150ms;
 --command-scale-from: 0.96;
 --command-overlay-blur: 4px;
 --command-dialog-radius: 12px;
 --command-dialog-max-width: 640px;
 --command-item-height: 44px;
 --command-highlight-color: oklch(0.85 0.15 90 / 0.3);
}

Migration from cmdk

npx modern-cmdk (codemods) --transform import-rewrite ./src
npx modern-cmdk (codemods) --transform data-attrs ./src
npx modern-cmdk (codemods) --transform forward-ref ./src
npx modern-cmdk (codemods) --transform should-filter ./src

Documentation

Development

git clone https://github.com/ABCrimson/modern-cmdk.git && cd modern-cmdk
pnpm install && pnpm build && pnpm test

Tech Stack

License