whatisgithub

What is cmdk?

dip/cmdk — explained in plain English

Analysis updated 2026-06-24

12,593TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A React component that gives you the Cmd+K command-palette pattern, a searchable popup where users type to filter a list of actions. No built-in styles included, so you design it however you want.

Mindmap

mindmap
  root((cmdk))
    What It Does
      Filter action list
      Keyboard navigation
      Empty and load states
    Customization
      No built-in styles
      CSS data attributes
      Custom filter logic
    Integration
      React component
      Radix UI dialog
      Cmd+K shortcut wiring
    Use Cases
      App command palette
      Search-everything menu
      Quick action trigger
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a Cmd+K command palette to a React app so users can search and run actions without leaving the keyboard.

USE CASE 2

Build a searchable navigation menu that filters routes or pages as the user types.

USE CASE 3

Create an inline search widget embedded on a page rather than as a floating overlay dialog.

What is it built with?

TypeScriptReactRadix UI

How does it compare?

dip/cmdkatlassian/pragmatic-drag-and-dropturbolinks/turbolinks
Stars12,59312,60012,600
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

So what is it?

cmdk is a React component for building command menu interfaces, sometimes called command palettes. A command menu is the search-everything popup that opens when you press Cmd+K (or Ctrl+K on Windows) in many modern web apps like Notion, Linear, or Vercel. The user types a few characters, a filtered list of actions or items appears, and selecting one triggers something. This library provides the behavior and structure for that pattern without any built-in visual styling. The component automatically filters and ranks the list of items as the user types. Items can be grouped under headings, and groups that have no matching items are hidden automatically. An empty state component renders when nothing matches. A loading state component can be shown while fetching results asynchronously. Each part of the component exposes a data attribute starting with "cmdk-" so developers can target it with CSS and apply whatever visual design they want. The component can be embedded inline on a page or rendered inside a dialog that floats over the rest of the content. The dialog variant builds on Radix UI's Dialog primitive and handles opening, closing, and the overlay backdrop. A keyboard shortcut example in the README shows how to wire up Cmd+K to toggle the dialog open and closed. Developers can pass a custom filter function to control how items are ranked against the search input, or disable filtering entirely to manage the list themselves. Items can also have extra keywords that are not displayed but help the filter match the item more broadly. The library is installed from npm as a single package and is built to stay small. It is written in TypeScript and its parts forward all standard HTML props and refs to the underlying DOM elements, making it straightforward to integrate into an existing React codebase.

Copy-paste prompts

Prompt 1
Using cmdk, build a React Cmd+K command palette that lists navigation routes and opens the selected one when pressed.
Prompt 2
How do I show a loading spinner in the cmdk command menu while fetching search results from an API?
Prompt 3
Style the cmdk command palette with Tailwind CSS by targeting its cmdk- data attributes on each element.
Prompt 4
Add hidden keyword synonyms to cmdk items so searching for 'invoice' also matches an item tagged 'billing'.

Frequently asked questions

What is cmdk?

A React component that gives you the Cmd+K command-palette pattern, a searchable popup where users type to filter a list of actions. No built-in styles included, so you design it however you want.

What language is cmdk written in?

Mainly TypeScript. The stack also includes TypeScript, React, Radix UI.

How hard is cmdk to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is cmdk for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.