SaaS dashboard template

What this kind of template is

People use “SaaS dashboard template” for two different screens.

One is the product home a customer sees after they sign in. It should show the account and the plan, and it should stay quiet when the database has no metrics yet. The other is an internal admin: sidebar, a users table, search, and the states a table needs when the query is empty, still loading, or failed.

Designyff sells those as different kits. Mixing them up is how a template purchase turns into a rewrite.

Who it is for

Use a dashboard template when the product already exists and the missing piece is the admin UI. You already have an API, or you are about to write one, and you do not want to redesign a sidebar and a table first.

Use a fuller SaaS starter when you do not have accounts, a database, or Stripe yet. A dashboard shell will not create those.

What should be included

A usable template has a layout that still works on a phone, a table that can sort and filter, and three states that survive the day you delete the sample rows: empty, loading, and error. Charts, if they exist, should be obvious placeholders until a real series is stored.

It does not need to include authentication, PostgreSQL, or Stripe to be an honest dashboard template. Those are a different product. A template that pretends to be a whole SaaS, while shipping only sample arrays, wastes the first week.

What the Admin Dashboard Kit includes

The Admin Dashboard Kit is a Next.js app with TypeScript and Tailwind CSS. The overview, users, and settings screens are in the project. The sidebar collapses. Tables sort, paginate, search, and filter. Empty, loading, and error states sit on the table. The chart component is SVG.

There is no database. src/lib/data.ts holds the sample records, including a users array and a sample series for the chart. The README’s path is npm install, then npm run dev, then open the app and use that sample data. When you connect a real API, replace that module. Keep the three table states.

The kit does not include email and password authentication, Prisma, Stripe Checkout, webhooks, or transactional email.

How the screen is built

The app is a small Next.js tree: src/app/ for the screens, src/components/chart.tsx for the SVG chart, src/components/states.tsx for empty, loading, and error, and src/lib/data.ts for the sample rows. That split is the point. The layout can stay while the data source changes.

Search and filters belong in the query string so a refresh keeps the view. Building a React admin dashboard walks through that table. Admin table empty, loading, and error states is the part worth keeping when you delete the sample rows. SaaS dashboard architecture explains where a signed-in product home reads plan, which this shell does not do.

Build the dashboard yourself, or start from the shell

Building it yourself means a layout, a responsive sidebar, a table with sort and filter, three empty states, and a chart you are willing to throw away. That is a few days before the admin shows real records.

Starting from this kit means those pieces are already in the repo and the sample data is marked as sample data. You still write the API. You still add auth if the admin must be private. The template does not skip that work. It skips the chrome.

When the Complete kit is the better start

The Complete SaaS Starter Kit already has a dashboard, plus the account and settings screens. That dashboard is behind email and password sessions. It reads the plan from the user row in PostgreSQL. Stripe Checkout, the customer portal, and webhooks update that plan. A transactional email adapter and Docker Compose are in the same project.

That dashboard is not this admin shell. It does not ship the sortable users table, the filter query string, or the SVG sample chart. If you need both a billed product and an internal admin, start with the complete kit for accounts and billing, then use the admin kit’s table and states where you list records. Next.js SaaS boilerplate vs starter kit is the closer comparison if you are still choosing how much of the SaaS to buy at all.

The smaller Next.js SaaS Boilerplate also has a dashboard and settings, with SQLite by default and a billing route. It is still an application, not an admin template.

Getting started

Install dependencies, run the dev server, and click through overview, users, and settings with the sample rows. Then replace src/lib/data.ts. Do not leave the sample chart in a production admin and describe it as revenue.