A react-cmdk alternative, with the dashboard around it

react-cmdk hasn't had a release since April 2023, and its peer range stops at React 18. If you used it to run an app from ⌘K, Command-K Dashboard is that app: the palette, the sidebar and the pages, in one React component.

Command-K Dashboard, preview
One payment$3

By buying you agree to the Terms.

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/dashboard/Dashboard.tsx

"use client";
// Before: <CommandPalette isOpen={open} onChangeOpen={setOpen} search={search} onChangeSearch={setSearch}> ... </CommandPalette>
import { useRouter } from "next/navigation";
import { CommandDashboard, DEFAULT_COMMANDS } from "@/components/CommandDashboard";
import type { Command } from "@/components/engine";

// Entries with a page switch the dashboard's own pages. The rest call onCommand.
const commands: Command[] = [
  ...DEFAULT_COMMANDS,
  { id: "docs", label: "Open the docs", group: "Help" },
  { id: "sign-out", label: "Sign out", group: "Account" },
];

export default function Dashboard() {
  const router = useRouter();
  return (
    <CommandDashboard
      commands={commands}
      autoplayDemo={false}
      hotkey="mod+k"
      onNavigate={(page) => router.replace(`/dashboard?page=${page}`, { scroll: false })}
      onCommand={(id) => {
        if (id === "docs") window.open("/docs", "_blank");
        if (id === "sign-out") router.push("/sign-out");
        if (id === "plus") router.push("/dashboard/invoices/new");
        if (id === "invite") router.push("/dashboard/team/invite");
      }}
    />
  );
}

Good to know

  • react-cmdk 1.3.9 came out on April 18, 2023, and the last push to its GitHub repo was on June 19, 2024. It isn't deprecated or archived. npm still counted 30,543 downloads in the week to October 22, 2026.
  • Its peer range is react ^16.x || ^17.x || ^18.x, and it depends on @headlessui/react ^1.6.4, whose peer range also ends at React 18. We tried it on October 25, 2026: on a React 19 app, npm 10 stops with ERESOLVE unless you pass --legacy-peer-deps.
  • Know what you're getting. react-cmdk is a palette you drop into your own layout. Command-K Dashboard is a whole SaaS dashboard (sidebar, overview, invoices, team and revenue pages) with the palette built in. If all you need is the palette, this is more than you want.
  • When the free option fits better: for a palette on its own, use cmdk. It's free, MIT licensed, accepts React 18 and 19, and it's what shadcn/ui's Command is built on. Version 1.1.1 is from March 2025, and npm counted 26,647,174 downloads in the week to October 22, 2026. Keep it if your layout is already done.
  • The palette filters on the label text or the start of the id. There's no fuzzy matching, no nested pages and no async results. Arrow keys, Enter and Escape work, and the input and list use the combobox, listbox and option roles.
  • Type-checked against next 15.5, react 19.1 and framer-motion 14.6 with TypeScript 5.9.

What your react-cmdk code maps to

  • isOpen and onChangeOpen: the palette keeps its own open state. ⌘K or Ctrl+K toggles it and Escape closes it. Set hotkey="none" to turn the shortcut off.
  • search, onChangeSearch and filterItems: built in. Typing filters the list by label.
  • CommandPalette.List heading: the group field on each command.
  • A ListItem with an href: a command with a page. The dashboard switches page and onNavigate tells you which, so you can keep the URL in sync.
  • A ListItem with an onClick: a command without a page. Its id arrives in onCommand.
  • CommandPalette.Page and searchPrefix: no match. There's one flat list.
  • useHandleOpenCommandPalette: not needed, the hotkey prop does it.
  • renderLink and footer: no match.

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm uninstall react-cmdk && npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

commands
palette entries: id, label, group, optional page
onNavigate
the page a command opened
onCommand
ids of commands without a page
hotkey
"mod+k" (⌘K on Mac, Ctrl+K elsewhere) or "none"
autoplayDemo
plays the tour by itself, off by default
data
your app data (Northwind mock by default)

How qodesign compares

  • qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
  • qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
  • qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Command Palette in React and Next.js: Cmd+K with cmdk, Done Right

Questions

Does react-cmdk work with React 19?

Not cleanly. Its peer range ends at React 18, so npm 10 refuses the install on a React 19 app unless you pass --legacy-peer-deps. We didn't test how it behaves after a forced install.

Is there a free option?

Yes. cmdk is free, maintained and works with React 19, and shadcn/ui's Command is a styled wrapper around it. It's the better pick when you only want the palette.

Can a command open my own pages?

Commands with a page open one of the four built-in pages. For anything else, leave page out and route in onCommand, or add a page in the source, which is plain React.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.