Quick Start

Quick Start

Basic Inline Palette

'use client';

import { Command } from 'modern-cmdk/react';

export function CommandPalette() {
  return (
    <Command label="Command palette">
      <Command.Input placeholder="Type a command..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Actions">
          <Command.Item value="copy" onSelect={() => navigator.clipboard.writeText('Hello')}>
            Copy to Clipboard
          </Command.Item>
          <Command.Item value="settings" onSelect={() => navigate('/settings')}>
            Settings
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  );
}

Dialog Mode (Cmd+K)

'use client';

import { useState, useEffect } from 'react';
import { Command } from 'modern-cmdk/react';

export function CommandDialog() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen(prev => !prev);
      }
    };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, []);

  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Command palette">
      <Command.Input placeholder="What do you need?" />
      <Command.List>
        <Command.Empty>Nothing found.</Command.Empty>
        <Command.Item value="dashboard" onSelect={() => navigate('/dashboard')}>
          Go to Dashboard
        </Command.Item>
        <Command.Item value="profile" onSelect={() => navigate('/profile')}>
          Profile Settings
        </Command.Item>
      </Command.List>
    </Command.Dialog>
  );
}

Core Engine (No React)

import { createCommandMachine, itemId } from 'modern-cmdk';

using machine = createCommandMachine({
  items: [
    { id: itemId('copy'), value: 'Copy', onSelect: () => copy() },
    { id: itemId('paste'), value: 'Paste', onSelect: () => paste() },
  ],
});

// Subscribe to state changes
machine.subscribe(() => {
  const state = machine.getState();
  console.log('Filtered:', state.filteredIds.length);
  console.log('Active:', state.activeId);
});

// Send events
machine.send({ type: 'SEARCH_CHANGE', query: 'cop' });
machine.send({ type: 'NAVIGATE', direction: 'next' });
machine.send({ type: 'ITEM_SELECT', id: itemId('copy') });