Skip to content
Get packs

cmdk

Unstyled React command menu component with built-in filtering and keyboard navigation.

GitHub Download v1.1.1
Stars
13.1k
Forks
382
Licence
MIT
Language
TypeScript
Last update
1.0 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

cmdk is a React component for building a command menu, the kind of searchable popup that opens with Cmd+K or Ctrl+K. You render a list of items and it filters and sorts them as the user types. It can also be used as an accessible combobox, and it ships without default styling so you can design it yourself.

  • Add a Cmd+K global menu that opens a dialog listing site pages and actions
  • Build nested menus where selecting an item shows a deeper set of options
  • Provide your own filtering logic or disable built-in filtering for server-side search
  • Show a custom empty state or loading indicator while async results load

Great for

  • React developers adding a command palette or search-and-jump menu to a web app
  • Teams that want full control over the look of the menu rather than a pre-styled widget
  • Apps that need items composed from custom components or static JSX
  • Projects that already use Radix UI, since the dialog builds on it

Not ideal for

  • Non-developers looking for a ready-made app; this is a component you must write code to use
  • Projects not using React, since the library is built specifically for React
  • Teams wanting a visually finished menu out of the box, because the component is intentionally unstyled
Step-by-step guide: how to use cmdkInstall, first run, examples, tips and FAQs
cmdk alternativescmdk vs shadcn/uicmdk vs Radix Primitivescmdk vs downshift

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · pnpm or another npm-compatible package manager · React

    Install the package

    pnpm install cmdk
  2. 2

    Run it

    • Install the package with pnpm install cmdk.
    • Import Command from 'cmdk' in a React component.
    • Wrap Command.Input, Command.List, and Command.Item elements inside a Command element.
    • Optionally wrap the menu in Command.Dialog and toggle it with a keydown listener for Cmd+K or Ctrl+K.
  3. 3

    Get the most out of it

    • Use the filter prop to write a custom ranking function for your items
    • Add keywords on Command.Item to make items findable by aliases
    • Set the loop prop so arrow keys wrap around the list
    • Use the value and onValueChange props to control the selected item from outside the component
    • Style the menu using the cmdk- data-attributes and the --cmdk-list-height CSS variable for smooth height animation

Downloads

Source code (.zip)main branch · straight from GitHubRelease v1.1.1Release notes and source

Strengths

  • Filters and sorts items automatically, so developers do not have to write that logic
  • Fully composable API, so items can be wrapped in other components
  • Styling hooks through data-attributes starting with cmdk- make custom design straightforward

Trade-offs

  • Requires you to supply all visual styling, which adds design work
  • Advanced features such as useCommandState are described as not for common use
  • Documentation in the README is limited to the component API and examples; setup beyond that is not covered here

How it compares

ProjectStarsTypeLevelUpdatedBest for
cmdk (this)13.1kLibrarybeginner1.0 years agoReact developers adding a command palette or search-and-jump menu to a web app
downshift12.3kLibraryintermediate4 months agoReact developers building a custom autocomplete or search-as-you-type input
ui127kLibraryintermediate4 days agoDevelopers building React or Next.js interfaces who want full control over component code
primitives19.5kLibraryintermediate23 days agoDevelopers building a custom design system who want accessible base components
assistant-ui12.9kLibraryintermediate4 days agoReact or Next.js developers adding an AI chat panel to an existing app
tippyjs12.2kLibraryintermediate2.4 years agoWeb developers who want ready-made tooltips or dropdown menus without building them from scratch

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.