tailthemes
all-access
dashboardnew

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.

Live Preview
$34
both modes at 1280px
Clearing — Treasury & Cash Forecast home page, light mode
Clearing — Treasury & Cash Forecast home page, light mode
Clearing — Treasury & Cash Forecast home page, dark mode
lightdarkloading live preview
120 / 120
light / dark tokens
2
modes, both designed
1
DOM, rendered twice
tailwind finance dashboard templatenextjs treasury dashboard templatecash flow forecast dashboard templatereact fintech admin dashboardcash management ui templatetailwind-v4
$34one-time · unlimited projects
28components · every one pictured below
Live Preview
  • unlimited projects, client work included
  • 12 months of updates
  • 14 days, no questions
licence terms

AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.

docs — install, use, customize
017

pages, 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.

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.

029 + 19

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.

ui/horizon

src/components/ui/horizon.tsx

THE SIGNATURE — the thirteen-week horizon as a full grid, a thirteen-cell strip, a single column and a legend

Clearing Tailwind finance dashboard template — ui/horizon component at full size
1 / 26
03120

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.

roles10 of 120

hover or tab a badge for its name and both values, enter copies

supporting74
radius
0.375rem
0.625rem
0.875rem
1.25rem
999px

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

043

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

icons · lucide-react · stroke 2
13px
14px
16px
display
Onest
text
Onest
mono
Chivo Mono
scaleratio 1.2
  • captionAg
  • smallAg
  • bodyAg
  • leadAg
  • d1Ag
  • d2Ag
  • d3Ag
  • d4Ag
05375–1920

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.

home page at 1280px, light mode
Clearing Tailwind finance dashboard template — home page at 1280px
1280
061

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.

07145

files in the zip

Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.

what unzipsclearing-1.0.0.zip
  • 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
your agent reads these first
what it runs on
next >=15react >=19tailwind >=4HTMLlucide-reactrechartsstandard licence
install into a project you already have
$ bunx shadcn add https://tailthemes.com/r/clearing.json
or run it standalone
$ unzip clearing.zip && bun install && bun dev
Read this theme's AGENTS.md
084

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.

the source

28 components, 7 pages and 120 tokens, as a Next.js project.

the kit

AGENTS.md carries the design spec. Each skill is one job written against it.

add-pageadd-sectioncheck-qualityrebrand
your agent

Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.

the new page

Built from the theme's own sections, on the same tokens and the same rhythm.

the spec travels with the code

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 covers
before you decide
What do I actually get?
A runnable Next.js >=15 project — not a screenshot and not a component dump. 7 pages, 9 sections and 19 primitives, 120 light tokens with 120 dark overrides, self-hosted fonts, and every image generated for this theme. AGENTS.md and 4 skills ship inside the zip, so your own agent can keep changing it after you buy. The same pages also ship as a framework-free HTML edition, with local fonts and vanilla JavaScript.
Does it include the pages I'd otherwise have to build?
Clearing ships cash position, thirteen-week forecast, payment run r-2634, lloyds · operating, solvay chemicals bv, exposure and facilities and the parts. Every one of them is a real route in the project with real content — you can open all of them in the live preview before you pay, and what you see there is what unzips.
Will it work with my stack?
Built for Tailwind >=4, Next.js >=15 and React >=19. Runtime dependencies are lucide-react, recharts — nothing else is required. The styling is tokens and Tailwind utilities, so it drops into an existing app rather than asking you to adopt a framework.
How long before it stops looking like a template?
The palette, type and spacing are 120 named tokens in one file, with 120 overrides for dark mode — change those and every screen moves together, which is the whole reason the theme is built as a system rather than as pages. Nothing here claims a number of hours: how long it takes depends on how far you move it.
Can I use it for client work?
Yes. One payment, unlimited projects, client work included, and 12 months of updates. Fourteen days to change your mind, no questions asked. The full terms are published, and this page and that page are the same source.
the other half
Grove — home page

The dashboard needs a front door.

Clearing is what your customers use. Grove is the page that gets them there — same Tailwind version, same token architecture, so the marketing site and the product do not look like two different companies.

activity
28
components
sections + primitives
7
pages
all in the preview
last updated
v1.0.0
roadmap
  • 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.

/api/themes/clearing
mcpsearch_themesget_themeget_componentdownload_theme