SaaS Dashboard

SaaS Dashboard Pro

Quick Start

Requirements: Node.js 18+ and pnpm. The template uses recharts for charts — it is installed automatically with pnpm install.

Download and unzip

After purchase, download the zip file from your order confirmation email and unzip it into your projects folder.

Install dependencies

pnpm install

No pnpm? Install it first: npm install -g pnpm

Start the dev server

pnpm dev

The root / redirects automatically to /dashboard. You can also navigate directly to any page:

localhost:3000/login — login page
localhost:3000/signup — sign up page
localhost:3000/dashboard — dashboard overview
localhost:3000/dashboard/analytics — analytics charts
localhost:3000/dashboard/users — user management
localhost:3000/dashboard/billing — billing and usage
localhost:3000/dashboard/reports — revenue reports
localhost:3000/dashboard/team — team members
localhost:3000/dashboard/settings — settings

Build for production

pnpm build
pnpm start

Folder Structure

Standard Next.js App Router layout. All dashboard pages share the layout in dashboard/layout.tsx which renders the collapsible sidebar and sticky header:

src/
├── app/
│   ├── layout.tsx              # Root layout — Syne + DM Sans via next/font
│   ├── globals.css             # Apex design tokens + Tailwind imports
│   ├── login/
│   │   └── page.tsx            # Login — dark editorial split panel
│   ├── signup/
│   │   └── page.tsx            # Signup — dot-grid dark panel
│   └── dashboard/
│       ├── layout.tsx          # Shared layout — grouped sidebar + header
│       ├── page.tsx            # Overview — bento grid, charts, activity feed
│       ├── analytics/
│       │   └── page.tsx        # Analytics — bar/donut charts, top pages table
│       ├── users/
│       │   └── page.tsx        # Users — filterable table, plan/status badges, slide panel
│       ├── billing/
│       │   └── page.tsx        # Billing — plan card, usage meters, invoice history
│       ├── reports/
│       │   └── page.tsx        # Reports — period switcher, revenue by plan, churn analysis
│       ├── team/
│       │   └── page.tsx        # Team — member list, pending invites, invite slide panel
│       └── settings/
│           └── page.tsx        # Settings — profile, notifications, security tabs
└── components/
    ├── Sidebar.tsx             # Collapsible grouped nav (Overview / Manage / Account)
    ├── SlidePanel.tsx          # Slide-out right panel with backdrop and escape close
    ├── DashboardShell.tsx      # Layout wrapper — sidebar + header + mobile drawer
    ├── LoginForm.tsx           # Email/password form with social providers
    ├── SignupForm.tsx          # Registration form with validation
    ├── Modal.tsx               # Accessible dialog / confirmation modal
    ├── ThemeToggle.tsx         # Dark/light mode toggle
    └── icons/
        ├── DotPattern.tsx      # Decorative dot grid SVG
        ├── GridPattern.tsx     # Decorative grid SVG
        ├── GitHubIcon.tsx      # GitHub SVG icon
        └── GoogleIcon.tsx      # Google SVG icon

The sidebar background (--sidebar-bg: #0a0b12 light / #06060b dark) stays dark in both modes for contrast. Active nav items use electric lime (#a3e635) for the indicator bar, icon, and label. Both are controlled by --sidebar-* tokens in globals.css.

Customization

Changing the accent color

The entire template - buttons, active nav, chart lines, badges, focus rings - derives its accent from two CSS variables in src/app/globals.css. Update them to reskin everything at once:

:root {
  --bg: #f6f7fb;          /* page background */
  --fg: #0a0b12;          /* default text */
  --primary: #4d7c0f;     /* forest green in light mode */
  --ring: #4d7c0f;        /* focus ring matches primary */
  --card: #ffffff;
  --sidebar-bg: #0a0b12;  /* sidebar stays dark always */
}

.dark {
  --bg: #08090d;          /* midnight dark */
  --fg: #e2e4ee;
  --primary: #a3e635;     /* electric lime - change this to your brand */
  --ring: #a3e635;
  --card: #0d0f18;
}

Fonts

Fonts are loaded in app/layout.tsx via next/font/google:

Syne — headings, brand name, large numbers (--font-heading)
DM Sans — body text, labels, descriptions (--font-body)

To swap fonts, replace the imports in layout.tsx and update the --font-heading / --font-body values in the @theme block in globals.css.

Adding a new dashboard page

1. Create src/app/dashboard/your-page/page.tsx — the sidebar and header from dashboard/layout.tsx apply automatically.

2. Add a nav entry to the appropriate group inside navGroups in dashboard/layout.tsx. The sidebar uses three groups — Overview, Manage, and Account:

const navGroups = [
  {
    label: "Overview",
    items: [
      { icon: <LayoutGrid size={15} strokeWidth={1.75} />, label: "Dashboard", href: "/dashboard" },
      { icon: <TrendingUp size={15} strokeWidth={1.75} />, label: "Analytics", href: "/dashboard/analytics" },
    ],
  },
  {
    label: "Manage",
    items: [
      // Add your new page here
      { icon: <YourIcon size={15} strokeWidth={1.75} />, label: "Your Page", href: "/dashboard/your-page" },
    ],
  },
];

Charts

Charts use recharts. The overview uses an AreaChart (lime + cyan); analytics uses BarChart and PieChart. Replace the mock data arrays at the top of each page file with your real data source. Chart stroke colors are set inline — update #a3e635 / #22d3ee to match your palette if you change the accent.

Deployment

Standalone output

The template ships with output: "standalone" in next.config.ts. This bundles only the necessary files and is the recommended setup for Docker, Railway, Render, and similar Node.js platforms.

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. Vercel detects Next.js automatically — no extra configuration needed.

Deploy to Railway / Render

Use these build settings:

Build command:  pnpm build
Start command:  pnpm start
Node version:   18+

Environment variables

No environment variables are required out of the box. When you add real auth, a database, or third-party APIs, create a .env.localfile locally and add the same keys in your hosting provider's environment settings.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.