SaaS Dashboard
A ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.
Preview
Image$39Open the full preview to inspect theme and responsive behavior.
Purchase to unlock the complete system
The preview stays visible. The runnable source, DESIGN.md context, prompts, tokens, and implementation files become available after purchase.
What's in the $39 bundle
- 8 dashboard pages: Overview · Revenue · Customers · Billing / Subscriptions · Team / Roles · Projects / Workspaces · Activity / Audit · Settings
- DESIGN.md
- Tokens + CSS variables
- Prompts + agent skills
- 13 reusable components
- Personal + commercial license
Stack: Next.js 15 · React 18 · TypeScript · Tailwind CSS · shadcn/ui-style primitives · Lucide icons
Source-backed gallery
Pages included
Every card maps to a route in the runnable source bundle. Open the matching preview path to inspect its route context, then use the ZIP for the runnable source.
Overview
Scan revenue, activation and recent product activity.
source-template/components/dashboard.tsx
Revenue
Review recurring revenue and acquisition mix.
source-template/components/dashboard.tsx
Customers
Search customer health, plan context and activity.
source-template/components/dashboard.tsx
Billing / Subscriptions
Review plan, seats, usage and invoice handoff states.
source-template/components/dashboard.tsx
Team / Roles
Manage team members, roles and pending invitations.
source-template/components/dashboard.tsx
Projects / Workspaces
Track workspaces and operational projects in flight.
source-template/components/dashboard.tsx
Activity / Audit
Review the latest team and workspace changes.
source-template/components/dashboard.tsx
Settings
Tune workspace defaults, notifications and boundaries.
source-template/components/dashboard.tsx
Public design system
A product-team workspace, not a founder pulse
Customers, billing, team roles and workspace activity in one warm operational surface — orange and green signal colors, charcoal navigation, and a strict 4px grid. Navigation density, metric hierarchy, table rhythm, responsive collapse, and semantic states are all fixed in the contract, so customers/billing/team screens stay consistent as the app grows.
Token roles
- Ink — Primary text, navigation
- Signal — Active state, momentum
- Data Accent — Charts, selected data
- Canvas — Warm page background
- Surface — Cards, panels, inputs
- Surface Hover — Row/item hover
Typography and rhythm
- Display: Inter, -apple-system, BlinkMacSystemFont, sans-serif
- Body: Inter, -apple-system, BlinkMacSystemFont, sans-serif
- Spacing base: 4px
- Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64px
- Responsive rules: Desktop (>1024px): persistent sidebar 240px, multi-column stat grid Tablet (768–1024px): sidebar collapses to icons or slides out
What is included in the download
The paid ZIP contains the runnable source, design contract and agent handoff artifacts. The public file tree is intentionally visible before purchase.
Run locally
cd source-template && pnpm install && pnpm devNot included: authentication, database persistence, Stripe, email, analytics providers, authorization enforcement and production API credentials.
AI-agent workflow
How to use
$read DESIGN.md --agent codexRead DESIGN.md with Codex before editing UI. Preserve local imports, responsive behavior, accessibility, and the existing local UI primitives.
Install
Run pnpm install and start the local source template.
Load context
Keep DESIGN.md, components.json, and tokens in the project root.
Extend
Use the prompts and local UI primitives before adding new patterns.
Related templates
Tokens
Color system
Named roles from the template contract. Every swatch is keyboard-copyable and includes its intended use, so the palette remains meaningful outside this preview.
Brand
Surfaces
Text
Data visualization
Status colors
| Status | Light | Dark | Usage |
|---|---|---|---|
| Success | — | Positive metrics | |
| Warning | — | Warning states | |
| Danger | — | Errors, destructive | |
| Info | — | Informational, links |
More templates
Related templates
Explore other ready-to-use DESIGN.md templates for your next project.
$39Minimal SaaS Dashboard
A calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.
FreeEditorial Product Landing Page
A complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.
$29AI App Starter
A dark-first DESIGN.md for AI apps: deep space canvas, an indigo-to-violet brand gradient reserved for generative moments, calm neutrals, and streaming-aware states.
$49Admin Panel
Admin Panel DESIGN.md for Cursor, Codex, and Claude Code: Light + Dark themes, responsive table rules, semantic states, and Tailwind-ready exports.
Need to know
Frequently asked questions
Practical answers about this template, its implementation scope, and the source bundle.