# Clearing — Tailwind Finance Dashboard Template

> A tailwind finance dashboard template for treasury: the rolling thirteen-week cash forecast, a payment run with a real state layer, 7 routes, one fixture spine.

- Price: $34, one-time
- License: Standard
- Version: 1.0.0
- Category: Dashboard
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15, React >=19, Tailwind CSS >=4
- Dependencies: `lucide-react`, `recharts`

## What's inside

- 7 pages
- 28 components
- 120 design tokens plus 120 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `app-shell`, `account-index`, `position-summary`, `movements-table` |
| `/forecast` | `app-shell`, `ui/horizon` |
| `/payments` | `app-shell`, `payment-run` |
| `/account` | `app-shell`, `account-statement` |
| `/counterparty` | `app-shell`, `counterparty-detail`, `ui/horizon` |
| `/exposure` | `app-shell`, `exposure-charts` |
| `/components` | `tokens`, `ui/horizon`, `ui/money`, `ui/button`, `ui/badge`, `ui/panel`, `ui/table`, `ui/dashboard-layout`, `ui/dropdown-menu`, `ui/popover` |

## Components

| Name | What it renders |
| --- | --- |
| `app-shell` | Sidebar and rail navigation, the freshness line, search, mode toggle, the covenant count on the Forecast item, and the footer's second-signature line |
| `account-index` | The account index — seven accounts across five banks with what each is for, cleared and uncleared balances, and a sterling total that separates liquid from ring-fenced |
| `position-summary` | Four position cards, each with one figure, its movement, and the clause saying what it excludes, plus the horizon strip and the covenant verdict |
| `movements-table` | The last two days of movements with cleared and in-flight states |
| `payment-run` | The Thursday supplier run: filters, selection, approval with a durable receipt, holds with reasons, and the two-eyes permission boundary |
| `account-statement` | One account opened — statement head, running-balance statement lines, and the instructions queued against it |
| `exposure-charts` | The cash curve with the covenant floor, receipts against payments by week, currency cover, and the positions-and-marks table |
| `ui/horizon` | THE SIGNATURE — the thirteen-week horizon as a full grid, a thirteen-cell strip, a single column and a legend |
| `ui/data` | The fixture spine: accounts, weeks, payments, exposures and the derivations every route reads |
| `ui/money` | Figure, DisplayFigure, Delta, DeltaPercent and DualFigure — how a number is printed in this theme |
| `ui/panel` | Panel, PanelHeader, PanelFooter and PageHeading — the console's one container |
| `ui/table` | The console table, its totals row and its empty state |
| `ui/button` | Button and ButtonLink — four variants, four sizes, disabled and pending |
| `ui/badge` | Badge, PaymentBadge, CovenantBadge and Eyebrow |
| `ui/dashboard-layout` | Shell geometry — expanded and collapsed navigation planes, sticky header, mobile navigation slot and main gutter |
| `ui/mode-toggle` | The light/dark switch, scoped to :root standalone and .tt-clearing embedded |
| `ui/chart.tsx` | Chart chrome — the token-only series mapping, the plot frame and the text alternative |
| `ui/dropdown-menu` | The console's one menu — tt-ui behaviour in this theme's register: an achromatic hover row, a disabled row that keeps its reason under the list, and a critical tone for the one action that cannot be undone |
| `counterparty-detail` | One counterparty opened — the net position across both ledgers, the credit limit, the weeks this name moves, its open invoices with ageing, and what we owe it in the run |
| `console-menus` | The header's standing-conditions menu and desk menu, every row derived from the fixture spine rather than authored |
| `ui/popover` | The disclosure behind the helper rule — a short line on the panel and its reasoning one press away, with the theme's Hint and HelperLine built on it |
| `ui/dialog` | The console's own card behind a neutral scrim — the hold surface on /payments and the rates note on /components. The width is the surface's and the ground is the panel's, so the styleguide photograph sits at the live width |
| `ui/confirm-dialog` | The two-eyes gate: approving a selection above £250,000 asks for the run's own id to be typed and names the second signatory, which is the policy the run header has printed since the theme shipped |
| `ui/tabs` | The counterparty's three ledgers — receivable, payable, settled — on the panel's header seam, selection drawn as a 2px rule rather than a fourth ground |
| `ui/field` | The shell every control in the hold form sits in: a persistent label, one supporting line, and a message row reserved so a field does not grow when it fails |
| `ui/form` | The submit flow behind the hold dialog — validate on submit, focus the summary or the first invalid control, keep every valid value, and land a durable receipt rather than a toast |
| `ui/form-error-summary` | The focused alert a failed hold puts the reader into, one underlined link per field still owed an answer |
| `ui/search-input` | The payment run's search, over beneficiary and reference: a labelled type=search, a clear that returns focus to the input, and a counted line that is announced and visible. It replaced a header field that filtered nothing on seven routes |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#ffffff` | `#0b0c0e` |
| `--foreground` | `#121315` | `#f2f3f6` |
| `--card` | `#ffffff` | `#161719` |
| `--card-foreground` | `#121315` | `#f2f3f6` |
| `--surface-sunken` | `#f6f7fa` | `#060608` |
| `--row-stripe` | `#f7f8fb` | `#1a1b1e` |
| `--surface-raised` | `#ffffff` | `#1f2023` |
| `--surface-overlay` | `#ffffff` | `#26272b` |
| `--overlay-border` | `#bcbdc2` | `#4b4d52` |
| `--muted` | `#f3f4f8` | `#1f2023` |
| `--muted-foreground` | `#6c6e73` | `#a1a3a8` |
| `--secondary` | `#f3f4f8` | `#1f2023` |
| `--secondary-foreground` | `#2a2c31` | `#f2f3f6` |
| `--muted-on-soft` | `#66686d` | `#a1a3a8` |
| `--secondary-hover` | `#ebedf1` | `#292a2e` |
| `--secondary-active` | `#e4e5e9` | `#333438` |
| `--border` | `#e4e5e8` | `#2c2e31` |
| `--border-strong` | `#a6a8ad` | `#56585d` |
| `--shadow-color` | `#111524` | `#000000` |
| `--scrim` | `#171a24` | `#030306` |
| `--nav` | `#f9fafc` | `#121315` |
| `--nav-foreground` | `#121315` | `#f2f3f6` |
| `--nav-muted` | `#6c6e73` | `#a1a3a8` |
| `--nav-label` | `#6c6e73` | `#7e828a` |
| `--nav-hover` | `#f1f2f6` | `#1d1e21` |
| `--nav-selected` | `#ffffff` | `#232427` |
| `--nav-selected-foreground` | `#1e1f8a` | `#8ca4ff` |
| `--nav-border` | `#e4e5e8` | `#2c2e31` |
| `--primary` | `#1e1f8a` | `#687de0` |
| `--primary-foreground` | `#ffffff` | `#0b0c0e` |
| `--primary-hover` | `#150377` | `#7b91ee` |
| `--primary-active` | `#0e0064` | `#90a6f7` |
| `--primary-soft` | `#ebf0fe` | `#1c254d` |
| `--primary-border` | `#ced8fa` | `#303d77` |
| `--primary-ink` | `#262d97` | `#869efc` |
| `--accent` | `#ebedf1` | `#292a2e` |
| `--accent-foreground` | `#2a2c31` | `#f2f3f6` |
| `--accent-hover` | `#e4e5e9` | `#333438` |
| `--accent-active` | `#dcdee3` | `#3c3d42` |
| `--accent-soft` | `#f6f7fa` | `#1f2023` |
| `--accent-border` | `#dedfe4` | `#343539` |
| `--field` | `#f9fafc` | `#161719` |
| `--field-border` | `#dedfe4` | `#313336` |
| `--control` | `#ffffff` | `#1f2023` |
| `--control-border` | `#dedfe4` | `#343539` |
| `--control-hover` | `#f0f1f5` | `#292a2e` |
| `--control-active` | `#e8e9ee` | `#333438` |
| `--ring` | `#4455c2` | `#7189f3` |
| `--selection` | `#dde7ff` | `#242e60` |
| `--selection-foreground` | `#131a44` | `#ebf0fe` |
| `--selection-border` | `#738aed` | `#687de0` |
| `--link` | `#3340ab` | `#8ca4ff` |
| `--link-hover` | `#20228d` | `#abc0ff` |
| `--link-visited` | `#5b3d87` | `#ae96da` |
| `--info` | `#0072ae` | `#41b0eb` |
| `--info-foreground` | `#ffffff` | `#0b0c0e` |
| `--info-soft` | `#e1f3ff` | `#072e42` |
| `--info-border` | `#b7e0f9` | `#004e71` |
| `--info-fill` | `#0072ae` | `#41b0eb` |
| `--positive` | `#0c7937` | `#53be70` |
| `--positive-foreground` | `#ffffff` | `#0b0c0e` |
| `--positive-soft` | `#e3f6e6` | `#12301a` |
| `--positive-border` | `#bee5c5` | `#1b552c` |
| `--positive-fill` | `#0c7937` | `#53be70` |
| `--warning` | `#985f00` | `#eea743` |
| `--warning-foreground` | `#ffffff` | `#0b0c0e` |
| `--warning-soft` | `#ffefd9` | `#3c2607` |
| `--warning-border` | `#f8d4a8` | `#663f00` |
| `--warning-fill` | `#985f00` | `#eea743` |
| `--critical` | `#bc2826` | `#ed695e` |
| `--critical-foreground` | `#ffffff` | `#0b0c0e` |
| `--critical-soft` | `#ffece9` | `#431d19` |
| `--critical-border` | `#facec8` | `#742e29` |
| `--critical-fill` | `#bc2826` | `#ed695e` |
| `--horizon-grid` | `#dedfe3` | `#2c2e31` |
| `--horizon-actual` | `#1e1f8a` | `#687de0` |
| `--horizon-forecast` | `#8499e9` | `#5568be` |
| `--horizon-floor` | `#d86258` | `#df695e` |
| `--horizon-breach` | `#ffece9` | `#431d19` |
| `--chart-1` | `#1e1f8a` | `#687de0` |
| `--chart-2` | `#4455c2` | `#8ca4ff` |
| `--chart-3` | `#828693` | `#888c99` |
| `--chart-4` | `#0c7937` | `#53be70` |
| `--chart-5` | `#bc2826` | `#ed695e` |
| `--radius-sm` | `0.375rem` | `0.375rem` |
| `--radius` | `0.625rem` | `0.625rem` |
| `--radius-lg` | `0.875rem` | `0.875rem` |
| `--radius-xl` | `1.25rem` | `1.25rem` |
| `--radius-pill` | `999px` | `999px` |
| `--shadow-raised` | `0 1px 2px -1px color-mix(in oklab, var(--shadow-color) 10%, transparent)` | `0 1px 2px -1px color-mix(in oklab, var(--shadow-color) 10%, transparent)` |
| `--shadow-overlay` | `0 10px 30px -12px color-mix(in oklab, var(--shadow-color) 26%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--shadow-color) 14%, transparent)` | `0 10px 30px -12px color-mix(in oklab, var(--shadow-color) 26%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--shadow-color) 14%, transparent)` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--text-d2` | `1.8rem` | `1.8rem` |
| `--leading-d2` | `1.2` | `1.2` |
| `--text-d3` | `clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)` | `clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)` |
| `--leading-d3` | `1.15` | `1.15` |
| `--text-d4` | `clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)` | `clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)` |
| `--leading-d4` | `1.1` | `1.1` |
| `--tracking-d1` | `-0.010em` | `-0.010em` |
| `--tracking-d2` | `-0.014em` | `-0.014em` |
| `--tracking-d3` | `-0.018em` | `-0.018em` |
| `--tracking-d4` | `-0.022em` | `-0.022em` |
| `--tracking-label` | `0.06em` | `0.06em` |
| `--font-display` | `var(--font-clearing-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-clearing-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-text` | `var(--font-clearing-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-clearing-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-clearing-mono), ui-monospace, monospace` | `var(--font-clearing-mono), ui-monospace, monospace` |
| `--display-weight` | `600` | `600` |
| `--duration-quick` | `110ms` | `110ms` |
| `--duration-settle` | `160ms` | `160ms` |
| `--ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | `cubic-bezier(0.2, 0, 0, 1)` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/clearing.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/clearing](https://tailthemes.com/api/download/clearing)

## Links

- Product page: [https://tailthemes.com/themes/clearing](https://tailthemes.com/themes/clearing)
- Live preview: [https://tailthemes.com/preview/clearing](https://tailthemes.com/preview/clearing)
- Docs: [https://tailthemes.com/docs/clearing](https://tailthemes.com/docs/clearing)
- Manifest JSON: [https://tailthemes.com/api/themes/clearing](https://tailthemes.com/api/themes/clearing)
- Registry item: [https://tailthemes.com/r/clearing.json](https://tailthemes.com/r/clearing.json)