cmdk vs shadcn/ui
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
Copy-in React UI components you customize as your own code, built on Tailwind CSS.
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 shadcn/ui if you need…
- Developers building React or Next.js interfaces who want full control over component code
- Teams that want a consistent design system they can change freely
- Designers working with developers who need components that match a custom look
- Projects already using Tailwind CSS, which the topics list suggests is the styling base
Side-by-side
| cmdk | shadcn/ui | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 13.1k | 127k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | See the README |
| Main language | TypeScript | TypeScript |
| Last code update | 12 months ago | 4 days 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.
shadcn/ui
shadcn/ui is a collection of UI components (buttons, forms and similar pieces) that you add to your own project as source code rather than installing as a locked package. You can then edit, extend and restyle them. The README describes it as a starting point for building your own component library.
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
shadcn/ui
- Developers building React or Next.js interfaces who want full control over component code
- Teams that want a consistent design system they can change freely
- Designers working with developers who need components that match a custom look
- Projects already using Tailwind CSS, which the topics list suggests is the styling base
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
shadcn/ui
- Component code lives in your project, so you can change it without waiting on an upstream release
- The README states the components are open source and MIT licensed
- Large community interest, with over 120,000 stars on GitHub
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
shadcn/ui
- People who want a finished, unstyled-free app or website template; this is a set of building blocks
- Developers who do not use React, since the topics point to a React-focused stack
- Beginners without basic web development knowledge, as adapting components requires reading code
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
shadcn/ui
- Because you own the code, you are responsible for updating components yourself
- The README provided is short, so detailed setup and feature information lives on the external docs site
- Relies on a specific stack (React and Tailwind) as indicated by the topics, which limits use elsewhere
Getting started
shadcn/ui
Clone the repository
git clone https://github.com/shadcn-ui/uiFrequently asked questions
What is the difference between cmdk and shadcn/ui?
cmdk: Unstyled React command menu component with built-in filtering and keyboard navigation. shadcn/ui: Copy-in React UI components you customize as your own code, built on Tailwind CSS. cmdk suits react developers adding a command palette or search-and-jump menu to a web app, while shadcn/ui suits developers building react or next.js interfaces who want full control over component code.
Are cmdk and shadcn/ui free?
cmdk: Free and open source. shadcn/ui: Free and open source.
Which is easier to set up, cmdk or shadcn/ui?
cmdk is easier to get started with (rated beginner); shadcn/ui is rated intermediate and usually needs more setup.
Is cmdk or shadcn/ui more popular?
shadcn/ui has more GitHub stars (127k) than cmdk (13.1k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to cmdk and shadcn/ui?
Other options people compare them with include downshift, Radix Primitives, Headless UI, Material 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.