Northstar — SaaS Dashboard Template

A complete, commercial-grade frontend UI system for a SaaS product. 30 interconnected pages, coherent mock data, analytics, customer management, billing, inbox, team, API, security, and support — all in plain HTML, CSS, and vanilla JavaScript. No frameworks, no build step.

Pages

Sections

Themes

Dependencies

Open dashboard →

HTML5CSS3Vanilla JSCSS VariablesSVG ChartsResponsiveDark modeAccessible

Design system

accent

success

warning

danger

info

text

InterJetBrains Mono 8px radiushairline bordersrestrained shadows

One indigo accent on a cool-stone neutral ramp, semantic status colors, hairline borders, and tight rhythm — reused identically across every page so the product feels cohesive.

What's inside

Coherent mock SaaS dataset shared across all pages
Interactive SVG charts (line, bar, donut, sparklines) with tooltips
Sortable, paginated, filterable tables with bulk selection
Multi-panel inbox with conversation list, thread, and customer sidebar
Modals, drawers, confirmation dialogs, and toast notifications
Permissions matrix, API keys, webhooks, and integrations marketplace
System status page with uptime bars and incident history
Loading, empty, and error application states
Light/dark mode with no-flash system preference detection
Responsive sidebar → off-canvas drawer, tables → cards on mobile
Keyboard navigation, focus-visible rings, ARIA, reduced-motion safe
Notification dropdown in the global header

Architecture

SaaS Dashboard/
├── preview.html            ← you are here (this gallery)
├── pages/                  ← 30 interconnected pages
│   ├── dashboard.html      ← overview, charts, table
│   ├── analytics.html      ← MRR/ARR/churn/retention/traffic
│   ├── reports.html        ← report list + preview + builder
│   ├── activity.html       ← full audit feed with filters
│   ├── customers.html      ← table with bulk actions
│   ├── customer-details.html  ← profile + tabs + notes
│   ├── customer-activity.html ← per-customer timeline
│   ├── customer-segments.html ← dynamic segments
│   ├── invitations.html    ← invite + resend/revoke
│   ├── billing.html        ← plan, usage, payment method
│   ├── plans.html          ← comparison + feature matrix
│   ├── payment-methods.html   ← cards + billing address
│   ├── invoices.html       ← list + modal invoice viewer
│   ├── transactions.html   ← log + detail drawer
│   ├── inbox.html          ← 3-panel support inbox
│   ├── notifications.html  ← center + mark-as-read
│   ├── preferences.html    ← notification preferences
│   ├── team.html           ← members + roles
│   ├── roles.html          ← permissions matrix
│   ├── workspace-settings.html
│   ├── integrations.html   ← marketplace + connect/configure
│   ├── settings.html       ← general + appearance
│   ├── profile.html        ← personal info + social
│   ├── security.html       ← password + 2FA + history
│   ├── sessions.html       ← active sessions + trusted devices
│   ├── api-keys.html       ← keys + create modal + quickstart
│   ├── webhooks.html       ← endpoints + events + retries
│   ├── help-center.html    ← search + categories + FAQ
│   ├── support.html        ← ticket form + history
│   └── system-status.html  ← uptime + incidents
├── css/app.css             ← shared Northstar design system
├── js/app.js               ← shared dataset + shell + components
└── assets/                 ← logo + favicon

A single DB object in js/app.js holds all mock data — customers, team, invoices, transactions, activity, conversations, notifications. Every page reads from it, so a customer on the Customers page is the same customer in transactions, activity, and inbox. Swap DB for a real API and the render code works unchanged.