Early Bird · 15% off all templates with code

SaaS Dashboard

SaaS Dashboard Pro

Quick Start

Requirements: Node.js 18+. The template uses recharts for charts - it is installed automatically with npm install.

1

Download and unzip

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

Install dependencies

npm install
3

Start the dev server

npm run 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
4

Build for production

npm run build
npm 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:  npm run build
Start command:  npm 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.