cmdk

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

cmdk

React

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

npm GitHub Docs

Fit

Bundle (gzip)

14.9 kB

46.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building a ⌘K command palette means implementing keyboard navigation, fuzzy search, item grouping, and ARIA roles from scratch — a significant amount of work that most apps delay indefinitely.

What It Does

cmdk provides composable Command.* components that handle keyboard navigation, filtering, and accessibility automatically. You supply the items and styling; the library handles the rest. It pairs perfectly with Radix Dialog for a modal command palette.

Installation

bash

npm install cmdk

Usage Example

tsx

import { Command } from 'cmdk';

export function CommandMenu() {
  return (
    <Command>
      <Command.Input placeholder="Search commands..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Actions">
          <Command.Item onSelect={() => console.log('new file')}>New File</Command.Item>
          <Command.Item onSelect={() => console.log('open settings')}>Open Settings</Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  );
}

Related packages

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

input-otpReact

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.