A free Next.js 16 SaaS dashboard starter with shadcn/ui and Tailwind CSS 4

#webdev #tailwindcss #nextjs #react

I just released a free SaaS dashboard starter built with Next.js 16, React 19, TypeScript, Tailwind CSS 4 and shadcn/ui. It's MIT-licensed, frontend only, and meant to be a clean first screen for an admin panel or internal tool.

Live demo: https://saas-dashboard-starter-chi.vercel.app/
Repo: https://github.com/studiogridpro/saas-dashboard-starter

Disclosure: this is a free starter for a paid kit we sell. The starter works on its own and you don't need anything else to use it.

What's in it

One dashboard overview page, on purpose:

an app shell with a desktop sidebar, a mobile navigation drawer and a sticky topbar
KPI cards and a set of operating signals
a revenue chart built with Recharts
a recent accounts table and an activity log
CSV export of the current snapshot
light and dark themes, with the choice saved in the browser

Why only one page

The scope is intentionally narrow: one screen, done properly. It's responsive from phone to desktop, works in both themes, and the demo data is easy to swap. The multi-page version with cross-screen state is the paid kit.

Stack choices

Next.js 16 with the App Router. The dashboard lives in a route group, app/(dashboard), with its own layout.
Tailwind CSS 4. There's no tailwind.config file; theme colors are CSS variables in app/globals.css.
shadcn/ui on Base UI. Components were added with the shadcn CLI using the Base UI style, so you can keep adding components the usual way.
Recharts for the chart and Lucide for icons.

Where to start customizing

These are the files you'll touch first:

app/(dashboard)/page.tsx
components/dashboard/sidebar.tsx
components/dashboard/topbar.tsx
components/dashboard/overview-chart.tsx
lib/dashboard-data.ts
app/globals.css

The demo data is in lib/dashboard-data.ts, so replacing it with API responses, server actions or a database query starts in one file.

What it doesn't include

No auth, database, API or payments. It's a frontend starting point, and the README says so up front.

Getting it running

git clone https://github.com/studiogridpro/saas-dashboard-starter.git
cd saas-dashboard-starter
pnpm install
pnpm dev

Or deploy it straight to Vercel with the button in the README.

If you try it, I'd like to hear what's missing or what you'd change in the structure.

If you need more than one screen, the full kit is here, and if you'd rather have the screens built and connected to your API, we do that at a fixed price.

DEV Community