cmdk vs downshift
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
Unstyled React command menu component with built-in filtering and keyboard navigation.
Open source · MIT
React hooks and a render-prop component for building accessible autocomplete, combobox and select dropdowns.
The short answer
Choose cmdk if you need…
- 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
Choose downshift if you need…
- React developers building a custom autocomplete or search-as-you-type input
- Teams that need a select or combobox that meets WAI-ARIA accessibility patterns
- Developers who want full control over how the dropdown looks
- Projects building multi-select inputs with tags, using useTagGroup
Side-by-side
| cmdk | downshift | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 13.1k | 12.3k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | JavaScript |
| Last code update | 12 months ago | 4 months ago |
What each one is
cmdk
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.
downshift
Downshift is a JavaScript library for React that handles the behavior and state of dropdown-style inputs such as autocomplete boxes, comboboxes and select menus. You supply the markup and styling, and it supplies the keyboard handling, highlighting and accessibility attributes that follow WAI-ARIA patterns. The README recommends its hooks, useSelect, useCombobox and useTagGroup, over the older Downshift render-prop component.
Best for
cmdk
- 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
downshift
- React developers building a custom autocomplete or search-as-you-type input
- Teams that need a select or combobox that meets WAI-ARIA accessibility patterns
- Developers who want full control over how the dropdown looks
- Projects building multi-select inputs with tags, using useTagGroup
Strengths
cmdk
- 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
downshift
- Accessibility is built in, following the ARIA combobox pattern as stated in the README
- Small API surface and flexible rendering, since you control all of the markup
- Actively maintained with a documented migration guide for version 7
Not ideal for
cmdk
- 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
downshift
- People who want a ready-made styled component out of the box; the README says you render everything yourself
- Projects not using React or Preact, since the library is built for those frameworks
- Teams needing the older Downshift component for new work, since the README says the hooks are recommended and the component will eventually be removed
Trade-offs
cmdk
- 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
downshift
- You must write the UI yourself, which means more code than a prebuilt component
- The README is truncated here, so detailed hook options are only available in the linked docs
- Downshift is recommended as hooks, so the older component API is not the path forward
Getting started
downshift
Install the package with npm
npm install --save downshiftFrequently asked questions
What is the difference between cmdk and downshift?
cmdk: Unstyled React command menu component with built-in filtering and keyboard navigation. downshift: React hooks and a render-prop component for building accessible autocomplete, combobox and select dropdowns. cmdk suits react developers adding a command palette or search-and-jump menu to a web app, while downshift suits react developers building a custom autocomplete or search-as-you-type input.
Are cmdk and downshift free?
cmdk: Free and open source. downshift: Free and open source.
Which is easier to set up, cmdk or downshift?
cmdk is easier to get started with (rated beginner); downshift is rated intermediate and usually needs more setup.
Is cmdk or downshift more popular?
cmdk has more GitHub stars (13.1k) than downshift (12.3k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to cmdk and downshift?
Other options people compare them with include shadcn/ui, Radix Primitives, React Select, Headless UI, Chakra UI.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.