Tender: SaaS revenue dashboard template for Next.js.
- Next.js 16
- Tailwind CSS v4
- TypeScript
- 7 sections
- Light
- No API keys
- Palette
- Updated Oct 24, 2026
01Overview
At a glance
The revenue side of a subscription business, for a fictional screenshot API called Shotbox: MRR and where it stands this month, customers, retention, failed payments, a forecast and a shareable banknote. Every chart follows one rule taken from banknote printing: the material of a mark says how real the money is, so colour is left free to tell the plans apart.
Made for
- SaaS and subscription products that bill monthly or yearly and want to see MRR, churn and failed payments in one place
- Founders who share their revenue in public and want a page and an image worth posting
- Teams who want a dashboard with a visual language of its own, not a kit of generic cards
- One rule across every chart: engraved for money still to come (heavier as it gets surer), ink for collected, punched for lost
- The month's MRR as an engraved figure inked as far as it's collected, with a day-by-day replay
- Every customer as a note on an uncut sheet, every failed payment as a note on its day, cohorts as line weight
- A forecast with levers and the day you cross your target, and a banknote printed from your numbers to share
02The look
Its own palette and type
The colours and type it ships with. Tap a colour to copy it.
- AaSchibsted GroteskIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789
- AaJetBrains MonoIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789
One neutral surface in light and dark, with every colour in the data: totals in emerald, plans in amber, azure and crimson. Rounded panels in a full-width grid that fills any desktop, from 1280px to 2560px. Schibsted Grotesk for figures and reading, JetBrains Mono for serials. Engraving stays registered across marks, so a growing bar slides over still lines. Motion only marks a change: lines thicken into ink, holes punch through in a sweep and close again when a payment is won back, and the sidebar folds to an icon rail in one smooth move.
03Sections
7 sections, in page order
From the first screen to the footer.
- 01
Overview
The month's MRR as an engraved figure, inked from the left as far as it's collected, with a row of days to replay the month. What needs you today, six key figures with the material of what makes each up, MRR by month with the next three engraved, and the month's movement from opening to closing. Press a month's bar and the whole page moves to it; the month lives in the URL.
- 02
Customers
Every customer as one note on an uncut sheet: colour is the plan, material is paying, past due, trialing or gone. Regroup by plan, state or signup year and the notes glide into place. A searchable, sortable table below, and a sheet for each customer with every invoice they paid, plan changes and the card on file.
- 03
Retention
Revenue kept by signup month drawn as line weight, solid at 100% and cut finely above it. Twelve months of money won printed above the line and money lost punched through below it, and the reasons customers gave when they cancelled.
- 04
Recovery
Every payment that failed this month as a note over the day it failed: won back, still retrying or lost. Each retrying payment's tries on a line with the next one engraved, and the cards that expire before their next invoice, with the money at stake.
- 05
Forecast
The months ahead engraved finer as they get less sure, the likely range above them and the day you cross your target. Levers for winning back failing payments, moving monthly plans to annual and raising a price, each with what it's worth on its own; save scenarios to compare.
- 06
Note and public page
A banknote printed from your numbers, today's MRR or a milestone, with a guilloche rosette drawn from them, in landscape or portrait, four inks and two papers; download it as a PNG. A read-only public page with the note, MRR by month and four figures.
- 07
App frame
A sidebar that folds to an icon rail (⌘B) and remembers it, glyphs inked for the screen you're on, ⌘K to jump to any screen, month or customer, Settings with the team, emails and the rules behind every figure, light, dark and system themes, and a sheet for navigation on phones.
04Make it yours
Where everything lives
Every screen asks for its numbers through one object in lib/analytics/index.ts. It runs on a seeded demo company until you point it at your own billing records; demo.ts shows every call answered, with the MRR, movement and retention rules beside it.
| To change | Edit |
|---|---|
| Product, company, signed-in person, plans and prices, the MRR target, navigation | site.config.ts |
| Where the numbers come from | lib/analytics/index.ts |
| The MRR and retention rules | lib/analytics/demo.ts |
| Settings saves: preferences and team | lib/account.ts |
| Surfaces, the plan inks, radii and type | app/globals.css, app/layout.tsx |
| Buttons, choices, steppers and inputs | components/shell/controls.tsx |
| The materials: pitch, angle, line weights, holes | components/plate/material.ts |
Run it
$ npm install$ npm run devNode.js 20.9 or newer. No environment variables.
Before you go live
Point analytics in lib/analytics/index.ts at your own billing records and delete the demo data, replace the functions in lib/account.ts with calls to your backend, and put your company, plans and target in site.config.ts.
05Specifications
What’s under the hood
- sections
- 7
- source files
- 64
- lines of code
- ~7,800
- dependencies
- 3
- API keys needed
- 0
Stack
- Framework
- Next.js 16 (App Router), React 19
- Language
- TypeScript
- Styling
- Tailwind CSS v4 with design tokens and component styles
- Dependencies
nextreactreact-dom
Design
- Fonts
- Schibsted Grotesk, JetBrains Mono, self-hosted with next/font
- Images
- No images: every chart, note, the banknote and its rosette are drawn in SVG from the data.
- Colour scheme
- Light
- Responsive
- Desktop, tablet and phone
Quality
- Accessibility
- Skip link, visible focus, keyboard navigation, reduced motion
- API keys and environment variables
- None
- Node.js
- 20.9 or newer
Shipping
- Deploys to
- Vercel, Netlify, Cloudflare Pages or any Node host
- Codebase
- 64 source files, about 7,800 lines
- Last updated
- Oct 24, 2026
06License
One license, no tiers
The full text ships as LICENSE.md in the download and is on the license page.
You can
- Use it for your own products
- Use it for any number of client projects
- Change the code and design however you like
- Deploy the result commercially
You can’t
- Resell or share the files as a template, theme or UI kit
- Publish the source as a template in a public repository
07Questions
Before you buy
What do I get when I buy Tender?
The complete Tender project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. It’s added to your account’s library the moment payment goes through.
Can I use Tender for client projects?
Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.
Do I need API keys, a database or a backend?
No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.
What should I change before I launch?
Point analytics in lib/analytics/index.ts at your own billing records and delete the demo data, replace the functions in lib/account.ts with calls to your backend, and put your company, plans and target in site.config.ts.
Do I need to know Next.js?
Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.
How do updates work?
Updates to Tender are free. When a new version ships, download it again from your library.
Can I get a refund?
Yes. If Tender isn’t right for you, email support@hairlineui.com within 14 days and you get your money back. No reason needed.
Should I buy all-access instead?
If you’ll use more than two templates, yes. All-access is $99 for all 45 templates, including Tender and every template added later. Three single templates would cost $117.
08All-access
Every template, one price
All 45 templates for $99.
Every template in the library, including Tender, and every one added later. Same license, free updates. Less than three single templates.
