A Next.js SaaS dashboard template, back end and app

nextjs/saas-starter gives you sign-in, Stripe subscriptions, teams and Postgres, free under MIT. Its dashboard is account settings. Command-K Dashboard is the app your users open every day, driven from ⌘K, and it drops into the starter as one route.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/workspace/page.tsx

import { redirect } from "next/navigation";
import { getUser } from "@/lib/db/queries";
import Workspace from "./workspace";

const PAGES = ["overview", "invoices", "team", "revenue"] as const;
type Page = (typeof PAGES)[number];

export default async function WorkspacePage({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const user = await getUser(); // the starter's own session check
  if (!user) redirect("/sign-in");

  const { page } = await searchParams;
  const initialPage: Page = PAGES.includes(page as Page) ? (page as Page) : "overview";
  return <Workspace initialPage={initialPage} />;
}

app/workspace/workspace.tsx

"use client";
import { useRouter } from "next/navigation";
import { CommandDashboard } from "@/components/CommandDashboard";
import type { PageId } from "@/components/engine";

export default function Workspace({ initialPage }: { initialPage: PageId }) {
  const router = useRouter();
  return (
    // qd-cmdk: the wrapper div the CSS scope edits target (see "Scope its CSS first" on the Command-K Dashboard guide)
    <div className="qd-cmdk" style={{ height: "100dvh" }}>
      <CommandDashboard
        initialPage={initialPage}
        hotkey="mod+k"
        onNavigate={(page) => router.replace(`/workspace?page=${page}`, { scroll: false })}
        onCommand={(id) => {
          if (id === "invite") router.push("/dashboard"); // the starter's Team page has the invite form
          if (id === "plus") router.push("/invoices/new"); // your own route
        }}
      />
    </div>
  );
}

middleware.ts (the starter's file: replace its two protectedRoutes lines)

const protectedRoutes = ["/dashboard", "/workspace"];
const isProtectedRoute = protectedRoutes.some((p) => pathname.startsWith(p));

Good to know

The starter's middleware only checks that a session cookie exists for paths under /dashboard, so /workspace is added there, and the page also calls the starter's getUser() before rendering.
The workspace sits outside the starter's (dashboard) route group on purpose. Command-K Dashboard brings its own sidebar and full-height layout, so it would sit awkwardly inside the starter's settings sidebar.
Command-K Dashboard ships with mock data in data/northwind.ts. The file's own comment says to edit the values and keep the shape; map your team, invoices and revenue into it.
A command with a page switches the dashboard's page and calls onNavigate. Every other command calls onCommand with its id, so New invoice (plus) and Invite a teammate (invite) are yours to route.

What the starter gives you, and what it leaves to you

nextjs/saas-starter is the SaaS starter in the nextjs GitHub org, MIT licensed, with 16,228 GitHub stars when we read it on October 26, 2026. In its own words: "Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui."
From its repo: email and password sign-in and sign-up, a pricing page, Stripe Checkout and a webhook route for subscriptions, Postgres through Drizzle, and a dashboard with four pages: Team (members, invites and the Manage Subscription button), General, Activity and Security.
Those are account pages. The screen your product is actually about, the one with your data on it, is the part you still build. That's the slot Command-K Dashboard fills: Overview, Invoices, Team and Revenue in one React component, with a ⌘K palette that moves between them, rows that stretch into pages and amounts that fly into the invoice total.

Scope its CSS before it meets the starter's shadcn styles

The starter is a shadcn/ui app on Tailwind CSS 4.1.7 (its package.json). Command-K Dashboard's stylesheet sets theme variables on :root, --muted among them, and styles html and body, so as shipped it would restyle the starter's own pages too.
Wrap the dashboard in a div with the qd-cmdk class, as workspace.tsx does, and apply the @scope edits and the globals.css rule from the Command-K Dashboard guide. That guide also covers Tailwind v4 bringing preflight back for a piece built without it.

Command-K Dashboard: scope its CSS first

Free options, if you only need a layout

If you want an admin layout to fill in yourself rather than a finished app, shadcn's free dashboard-01 block and the free Orbit dashboard are covered in our shadcn dashboard template guide.

shadcn dashboard templates, compared

What we checked

On October 26, 2026 the two workspace files type-checked with TypeScript 5.9 strict against Command-K Dashboard's own source and built with next build on Next.js 15.5.28 and React 19.1.1, with getUser() stubbed. In headless Chromium at 390 and 1440 px, ⌘K, typing "rev" and Enter switched the dashboard to Revenue and onNavigate updated the URL to ?page=revenue, with no page errors.
The starter facts (pages, middleware, package versions) are read from its GitHub repo the same day. We didn't run the starter itself.

Install

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

Props

initialPage: overview, invoices, team or revenue
onNavigate: called with the page when the palette switches pages
onCommand: called with the id of any other command (plus, invite)
commands: palette entries; entries with a page navigate
data: your workspace, team, invoices and revenue, in the sample's shape
hotkey: "mod+k" (⌘K on Mac, Ctrl+K elsewhere) or "none"

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

Is nextjs/saas-starter free?

Yes. It's MIT licensed and on GitHub.

Does Command-K Dashboard include auth or billing?

No. It's the app UI with mock data. Sign-in, teams and Stripe subscriptions come from the starter.

Can I use it without the starter?

Yes. It's one React component; any Next.js app can render it from a client component.

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.