Building a React admin dashboard

An admin dashboard is a layout plus a table that still works when the data source changes. The Admin Dashboard Kit is a Next.js 15 app with a sidebar, an overview, a users table, and settings. It does not ship a database. src/lib/data.ts is the seam.

Sample records, typed

export type UserRow = {
  id: string;
  name: string;
  email: string;
  role: "admin" | "member";
  status: "active" | "invited";
};

export const users: UserRow[] = [
  { id: "u_1", name: "Ada Lovelace", email: "ada@example.com", role: "admin", status: "active" }
];

export const revenue = [12, 18, 16, 22, 28, 26, 34];

The overview counts users.length, how many have status === "active", and how many are "invited". The chart maps revenue to SVG rectangles. Those numbers are the sample file, not a live metric. When you connect an API, replace the exports with a function that returns the same UserRow[]. The table and the counts do not need to know about Prisma.

Layout

The shell is a two-column grid: a sidebar (Overview, Users, Settings) and a section. Keep navigation in the layout, not inside each page, so a new screen is a route plus a link. The kit uses Tailwind and the App Router. There is no auth gate in the sample. Put the dashboard behind your session check before you point it at real customers. The Complete SaaS Starter Kit already has that session.

Empty, loading, error

A table component should render three states that are not the happy path: no rows, a pending fetch, and a failed fetch. Build those as branches on the same component that renders users, so a filter that matches nothing does not look like a broken page. The kit includes those states so you are not inventing them when the API returns [].

Charts

The bar chart is inline SVG fed by a number array. It does not import a chart library. That keeps the bundle small and the markup obvious. If you need tooltips or time axes, add a library later. Do not start there.

Sorting, search, and pagination belong on the table, against the in-memory array first. When the array comes from a server, move the same parameters to the query string so a refresh keeps the filter.

Table filters

Search and role filters belong in the query string (?q=ada&role=admin) so a refresh keeps the view. Filter the in-memory users array first. When you swap src/lib/data.ts for an API, send the same two parameters to the server.

Empty, loading, and error states are covered in admin table empty states. Put those branches on the table, not on a separate page, so a filter that matches nothing does not look like a crash.

The SaaS dashboard in the Complete SaaS Starter Kit is a signed-in product home. This kit is the internal admin shell you attach later. Prices, what is missing, and which one to open first are on the SaaS dashboard template page.

Want to skip the setup? The Admin Dashboard Kit already includes the sidebar, the users table, the chart, and the sample data module.