Documentation

Everything you need to install, customize and ship NextAdminPro, the free Next.js admin dashboard template.

Installation

You need Node.js 20.9 or newer. Clone the repository, install dependencies and start the dev server:

git clone https://github.com/99proteam/NextAdminPro.git my-admin
cd my-admin
npm install
npm run dev

Open http://localhost:3000 for the landing page and /dashboard for the admin panel.

Project structure

src/
├── app/                 # routes (App Router)
│   ├── (auth)/          # login, register, forgot-password
│   ├── dashboard/       # every admin page
│   └── globals.css      # design tokens
├── components/
│   ├── ui/              # primitives: Button, Card, Dialog, Select…
│   ├── data-table/      # reusable <DataTable>
│   ├── charts/          # Recharts wrappers
│   └── layout/          # sidebar, header, command palette
├── config/              # site + navigation config
└── lib/data/            # typed mock data – swap for your API

Theming & branding

Every color is a CSS variable in src/app/globals.css. Change --primary to rebrand the whole app, or add your own accent preset:

[data-accent="teal"] { --primary: #0f766e; --ring: #0f766e; }
.dark[data-accent="teal"] { --primary: #2dd4bf; --ring: #2dd4bf; }

Then add "teal" to the accents array in src/components/providers.tsx. Update the product name, URL and SEO keywords in src/config/site.ts.

Navigation

Sidebar groups and links live in src/config/navigation.ts. The command palette (⌘K) and breadcrumbs pick up changes automatically.

{ title: "Leads", href: "/dashboard/leads", icon: Target, keywords: ["crm", "pipeline"] }

Connecting your data

Pages import from @/lib/data. Server components can fetch from any source (Prisma, Drizzle, Supabase, a REST API) and pass the result to the existing client views:

// src/app/dashboard/customers/page.tsx
import { db } from "@/lib/db";

export default async function CustomersPage() {
  const customers = await db.customer.findMany({ orderBy: { createdAt: "desc" } });
  return <CustomersView initial={customers} />;
}

The expected shapes are documented in src/lib/data/types.ts. Replace the local setDatacalls in each view with Server Actions or API calls to persist changes.

Using the DataTable

One component powers every list page: search, faceted filters, sorting, pagination, column toggles, bulk actions and CSV export.

<DataTable
  data={orders}
  getRowId={(o) => o.id}
  columns={[
    { id: "number", header: "Order", cell: (o) => o.number, sortValue: (o) => o.number },
    { id: "total", header: "Total", cell: (o) => formatCurrency(o.total), sortValue: (o) => o.total },
  ]}
  searchText={(o) => o.customerName}
  filters={[{ id: "status", label: "Status", value: (o) => o.status, options: [...] }]}
  exportName="orders"
  bulkActions={(rows, clear) => <Button onClick={...}>Archive</Button>}
/>

Authentication

The login, register and forgot-password pages are UI only, so you can use any provider: Auth.js, Better Auth, Clerk or Supabase Auth. Protect /dashboard in a proxy.ts file or by checking the session in src/app/dashboard/layout.tsx.

Roles & permissions

src/lib/permissions.ts defines roles, resources, actions and a default matrix, plus a can() helper. Use it to hide UI on the client and enforce it on the server:

if (!can(matrix, user.role, "Invoices", "delete")) throw new Error("Forbidden");

Deployment

Vercel / Node hosting: npm run build && npm run start. Set NEXT_PUBLIC_SITE_URL to your domain.

Static hosting (GitHub Pages, Netlify, S3): npm run build:pages writes a fully static site to out/. Set PAGES_BASE_PATH if it’s served from a sub-path (defaults to /NextAdminPro). The included GitHub Action deploys the live demo on every push to main.

Keyboard shortcuts

• Ctrl/⌘ + K: command palette
• Ctrl/⌘ + B: toggle sidebar
• ?: show all shortcuts
• G then D/C/O/P/I/S: go to dashboard, customers, orders, products, inbox or settings