SaaS dashboard with ⌘K

A whole app you drive from the command palette. Rows stretch into pages.

Get the code · $3React · Tailwind · TypeScript
Command-K Dashboard, preview

Use it in Next.js

"use client";
import { CommandDashboard } from "@/components/CommandDashboard";

export default function App() {
  return <CommandDashboard hotkey="mod+k" onNavigate={(page) => console.log(page)} onCommand={(id) => run(id)} />;
}

Install

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

Props

commands
palette entries
onNavigate / onCommand
what a command does
hotkey
⌘K on Mac, Ctrl+K elsewhere
data
your app data

Questions

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.

Does ⌘K work on Windows?

Yes, as Ctrl+K.

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.