ClearingTailwind finance dashboard template
A finance dashboard template for treasury, cash-management and CFO products, built on the artifact a treasury actually runs on: a rolling thirteen-week cash forecast.



- 120 / 120
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 9 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
Cash position/- app-shell
- account-index
- position-summary
- movements-table
Thirteen-week forecast/forecast- app-shell
- ui/horizon
Payment run R-2634/payments- app-shell
- payment-run
Lloyds · Operating/account- app-shell
- account-statement
Solvay Chemicals BV/counterparty- app-shell
- counterparty-detail
- ui/horizon
Exposure and facilities/exposure- app-shell
- exposure-charts
The parts/components- tokens
- ui/horizon
- ui/money
- ui/button
- ui/badge
- +5
Seven routes ship — a cash position that opens on the account index rather than a stat rail, the thirteen-week forecast at full size with three costed ways out of the week that breaches the covenant, a Thursday supplier payment run, an account statement, a counterparty page that opens on the net position rather than a balance, an exposure and facilities page, and a living component styleguide. The signature is the horizon: one thirteen-week window drawn three ways — the full grid, a thirteen-cell strip inside an account row, and a single blown-up column — all three resolving through one function that throws on a week outside the window, so no drawing can disagree with another about where the money runs out. A closed week is solid and an open week is hatched, so the distinction that matters most survives greyscale and a colour-blind reader. The register is deliberately flat: white paper, one hairline, and a saturated ink spent in three places only — the brand, the money direction, and the horizon. Green means money in and red means money out on every route, which is why the brand ink is neither. The payment run carries the state layer: selection, filters whose empty state names the filter rather than implying an empty run, an approval above £250,000 that opens a two-eyes confirmation the run's own id has to be typed into, a hold that asks for a category and a sentence before it will record one, and a durable receipt instead of a toast. Every figure on every route derives from one fixture file, and the styleguide checks that spine in front of the reader. 120 design tokens, every one re-authored for dark, all of it derived in OKLCH and every pair computed against its contrast tier. Self-hosted Onest and Chivo Mono. Built for Tailwind v4, Next.js 15 and React 19; every colour lives in theme.css.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project. 26 frames cover them, with 3 primitives sharing the ui/* frame.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The thirteen-week horizon: one rolling cash window drawn three ways — the full grid on /forecast, a thirteen-cell strip inside an account row or a summary card, and one blown-up column at the head of a page about that week. All three resolve through weekFor() (src/components/ui/data.ts), which throws on a week outside the window, so a strip cannot silently render twelve cells. A closed week is solid and an open week is hatched: 'banked' versus 'forecast' is the most important distinction on the screen and it is carried by a texture, not a hue. Not portable — a horizon means nothing on a landing page; it exists only where the substrate is money over time.
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.2.
Clearing
A finance dashboard template for treasury, cash-management and CFO products, built on the artifact a treasury actually runs on: a rolling thirteen-week cash forecast.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Onest
- text
- Onest
- mono
- Chivo Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.

every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdAdd a route to Clearing
- add-section/SKILL.mdAdd a new section component to Clearing that matches the console's idiom and cannot disagree with the rest of the product
- check-quality/SKILL.mdRun Clearing's own quality gate
- rebrand/SKILL.mdRepaint Clearing for a different company
- src/
- theme.css120 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/7 files
- components/11 files
- ui/21 files
- fonts/2 font files, 2 licences
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/7 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
28 components, 7 pages and 120 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard licence coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v1.0.0 — six-route treasury console: the thirteen-week horizon drawn three ways off one derivation, a payment run with the state layer, and a covenant floor every screen agrees about
- the framework-free HTML edition, authored rather than scaffoldedplanned
- a parameterised /accounts/[id] once a buyer asks for more than the operating accountplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.



