SaaS dashboard template.
A complete web app UI for a SaaS analytics dashboard: eight screens for a sample subscription revenue tool called Tallywise, from the MRR overview and customer list to revenue reports, invoices, cohort retention, team settings, and first-run onboarding. The numbers add up on every screen, and every screen is plain HTML with Tailwind, so Codex or Claude Code can clone it and turn it into your app.
Updated November 7, 2026
Website · 8 pages · Free and open source
01Overview 
02Customers 
03Customer detail 
04Revenue 
05Invoices 
06Cohorts 
07Settings 
08Onboarding
Clone it
npx degit ummydev/ui-templates/webapps/saas-dashboard my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the SaaS dashboard template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
Design system
LedgerWebA dense, dark interface for numbers, with a terminal-amber accent.Headings in IBM Plex Sans- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
What’s in the template
| Screen | What’s on it |
|---|---|
| Overview | MRR, ARR, customers, and churn against last month, MRR movement, MRR by plan, and events |
| Customers | Search, plan and status filters, sorting, and a table of companies with plan and MRR |
| Customer detail | Company details, the subscription, MRR history, lifetime revenue, notes, and activity |
| Revenue | Twelve months of new, expansion, contraction, and churn MRR, with a CSV export |
| Invoices | Invoices by status (open, overdue, draft, paid) next to a preview of one invoice |
| Cohorts | A retention table by signup month, with the weighted average and what it means |
| Settings | Team members and roles, invites, masked API keys, and role permissions |
| Onboarding | A new account’s empty state, with steps to connect Stripe, import history, and invite |
The sample data is a made-up company’s October: $62,500 MRR, $750,000 ARR, 712 customers, and 3.9% churn. The four plans add up to exactly those totals, the month’s movement adds up too ($59,840 + $4,210 + $1,890 − $420 − $3,020 = $62,500), and the twelve months in the revenue report end at the same MRR as the overview. Customer names are fictional.
Each screen is one HTML file, designed at 1440×900 and usable on a 390-pixel phone, where the sidebar folds into a menu and tables scroll sideways. It is styled with Tailwind CSS v4 and a shared tokens.css. Numbers use IBM Plex Mono with tabular figures, charts are SVG, table rows can be selected with the keyboard, and icons are Lucide. Open any file in a browser; there is nothing to install or build.
Use it with Codex or Claude Code
Copy just this template from the ui-templates repository:
npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard
Then ask your agent to make it yours:
This folder is a SaaS dashboard UI template. Turn it into [your product], for [who it's for]. Keep DESIGN.md and tokens.css as the design system, replace the metrics, plans, customers and charts with [your data], and keep every total consistent across screens. Then build it in [Next.js / React / your stack] and connect it to [your data source].
Because the design system is written down in DESIGN.md, new screens your agent adds, such as alerts, segments, or a forecast, will match the eight that are already there.
Built on the Ledger design system
The template uses Ledger, a dense, dark design system for data-heavy tools: IBM Plex Sans with IBM Plex Mono for numbers, 6px corners, and one terminal-amber accent for the active state and key values. Its page has a live preview, the full DESIGN.md, and a shadcn theme.
Frequently asked questions
Is this SaaS dashboard template free?
Yes. It’s open source under the MIT license, for personal and commercial projects.
Can I use it with Next.js, React, or shadcn/ui?
Yes. The screens are plain HTML with Tailwind classes, so your agent can turn them into components in any framework, and Ledger’s page includes a shadcn theme with the same colors. Ask it to keep tokens.css and DESIGN.md as they are, so the design survives the move.
Is there a light theme?
Yes. Dark is the default; remove class="dark" from the <html> tag of any screen to switch it to Ledger’s light theme.