Northstar — AI-Ready Next.js SaaS Dashboard & Billing UI Kit

Ship a Linear- and Stripe-Grade SaaS Dashboard in Hours, Not Weeks

Northstar is a commercial-quality SaaS Revenue, Subscription & Billing Dashboard UI Kit built on Next.js (App Router), Strict TypeScript, Tailwind CSS v4, shadcn/ui, Recharts, and React Hook Form + Zod.

Unlike generic admin templates bloated with unused widgets, Northstar is modeled after the visual precision of Linear, Vercel, and Stripe—and is specifically architected for developers building with AI coding assistants (Cursor, Claude Code, Antigravity, and Windsurf).

Why Developers Choose Northstar

• AI-Assistant Ready Out of the Box (AGENTS.md Included)
  Ships with a dedicated AGENTS.md architecture specification and a clean async service layer (src/lib/services/*). Prompt Cursor, Claude Code, or Antigravity to connect Prisma, Drizzle, Supabase, or Stripe and watch it wire your backend without breaking a single UI component.
• 100% Working Frontend—Not Static Mockups
  Every table sorts, filters, searches, paginates, and exports to CSV. Every modal form validates with React Hook Form + Zod. Every chart dynamically recalculates across custom date ranges and period-over-period comparisons.
• Instant OKLCH Theming (Light, Dark & 6 Brand Accents)
  Re-theme the entire dashboard from a single globals.css file, or let users switch between Light, Dark, System, and 6 live brand accent presets (Indigo, Blue, Emerald, Orange, Rose, Neutral).
• Mathematically Consistent Seed Dataset
  Pre-populated with 40 realistic B2B customers, 9 plans & add-ons, 43 subscriptions, and 470+ historical invoices and payment attempts—derived from a single deterministic seed so MRR, LTV, churn, and revenue numbers match across every screen.

11+ Production Pages Included

1. Overview Dashboard (/)
   • Collected Revenue, Monthly Recurring Revenue (MRR), Active Subscriptions, and Total Customers KPI cards
   • Interactive Revenue & MRR Area Chart with dashed previous-period comparison
   • Recent Transactions list, chronological Activity Timeline, Date-Range Picker, and CSV export
2. Revenue & Retention Analytics (/analytics)
   • 6 KPI summary cards including Logo Churn Rate and Signup → Paid Conversion Rate
   • Revenue Analytics comparison chart, Customer Growth curve, and Subscription Growth vs. Churn bar chart
   • Churn & Conversion multi-line trends, marketing funnel breakdown, Revenue by Product donut chart, and CSV report export
3. Customers Directory & Detail View (/customers & /customers/[id])
   • Searchable, filterable customer table with MRR, Lifetime Value (LTV), location, and status badges (Active, Trialing, Past Due, Churned)
   • Add Customer modal form (React Hook Form + Zod)
   • Full customer profile page with payment method on file, Subscriptions tab, Invoices tab, and Activity Timeline
4. Products & Pricing Catalog (/products & /products/[id])
   • Core Plans & Add-ons catalog with category and status filters
   • Create Product and Edit Product dialogs, quick-inspect slide-over drawer, and dedicated product detail page
5. Subscriptions Lifecycle (/subscriptions & /subscriptions/[id])
   • Filter by status (Active, Trialing, Past Due, Canceled) and billing interval (Monthly, Annual)
   • One-click payment retry, cancel-at-period-end toggle, immediate cancellation confirmation dialog, and full subscription detail page
6. Billing, Invoices & Dunning (/billing & /billing/invoices/[id])
   • Invoices list with quick preview dialog, mark-as-paid action, and downloadable invoice receipts
   • Payment History log with card brand/last4, decline reasons, and retry actions
   • Printable Tax Invoice page (/billing/invoices/[id]) optimized for window.print() and PDF saving
   • Billing Settings form for legal entity, Tax ID/VAT, invoice numbering prefix, net terms, and smart dunning switches
7. Workspace & Team Settings (/settings)
   • General workspace configuration + Danger Zone confirmation modal
   • Profile settings + Two-Factor Authentication (2FA) toggle
   • Team Members directory with role selector, member removal, and Invite Member dialog
   • Roles & Permissions interactive RBAC matrix (Owner, Admin, Developer, Billing, Viewer)
   • Notification Preferences (email & push toggles) and Appearance customizer

Reusable Component System

• Navigation & Shell: Collapsible Desktop Sidebar (⌘B), Mobile Drawer, Global Command Palette (⌘K), Notifications Popover, Workspace Switcher, Theme Toggle, User Account Menu
• Data Display: MetricCard, DataTable (sorting + pagination + empty state), StatusBadge, PageHeader with breadcrumbs, EmptyState, PageSkeleton
• Controls & Forms: DateRangePicker (presets + dual-month calendar), SearchInput, FilterSelect, Dialogs, Alert Dialogs, Sheets, Tabs
• Charts: Hydration-safe AreaChart, BarChart, LineChart, DonutChart, and ChartTooltip

Tech Stack

• Framework: Next.js 16 (App Router, React Server Components)
• Language: TypeScript 6 (strict: true, zero any)
• Styling: Tailwind CSS v4 + CSS Variables (OKLCH color space)
• UI Primitives: shadcn/ui + Radix UI + Lucide Icons
• Charts: Recharts 3
• Forms & Validation: React Hook Form + Zod 4
• Notifications & Themes: Sonner + next-themes + Geist Sans & Geist Mono