Budget variancePro
Budget against actual operating spend by department as aligned bullet charts, with favorable and unfavorable variance, a month, quarter and year to date switch that springs every bar, in-place drill-down into budget lines, and a total row.
Live block · sample data
- Monthly close and budget review screens that compare planned and actual operating spend by department or cost center.
- Finance dashboards where a controller needs to see at a glance which teams are over, which are under, and by how much.
- Any plan against actual comparison with a meaningful tolerance band, such as headcount cost or cloud spend by team.
- Use mrr-waterfall to explain how a single total moved from one value to another.
- Use usage-forecast to project spend against a cap over time.
- Use a line or bar chart to show a trend across many periods; this block compares one window at a time.
- Use a sortable data table when there are dozens of cost centers and sorting matters more than the visual comparison.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Render <BudgetVariance /> for the demo, or pass departments (lines with budget and actual keyed by period id), periods, defaultPeriod, defaultExpanded and ranges. Department figures and the total are summed from the lines, and onPeriodChange and onDepartmentToggle report changes.
example.tsx
import { BudgetVariance } from "@/registry/blocks/budget-variance/budget-variance"; export function FinanceOverview({ departments }) { return ( <BudgetVariance departments={departments} defaultPeriod="quarter" ranges={[0.9, 1.05]} onDepartmentToggle={(id, open) => open && prefetchLines(id)} /> );}BudgetVariance
Budget against actual spend by department as bullet charts on one shared scale, so every budget tick lines up down the table. Each row shows qualitative bands, the actual bar with the overspend drawn in the danger color past the tick, and variance as a signed amount and share colored by whether it is favorable. A month, quarter and year to date switch springs every bar and counts every number to the new window, a total row sums the table, and any department opens in place to show its budget lines.
PropTypeDefaultDescription
departmentsBudgetDepartment[]budgetDepartmentsDepartments with an id, a name, an owner ({ name, avatar? }) and budget lines. Each line has an id, a name, and budget and actual amounts keyed by period id. Department figures and the total are summed from the lines.periodsBudgetPeriod[]budgetPeriodsReporting windows for the switch, each with an id, a short label, a description shown under the title and a phrase for screen reader sentences ("in the third quarter").defaultPeriodstring–Id of the window shown first. Defaults to the first period.defaultExpandedstring | null"engineering"Id of the department open on first render. Pass null to start with every department closed.ranges[number, number][0.9, 1.1]Qualitative band edges as shares of budget. Spend between them is within tolerance; the bands step darker past the upper edge.onPlanThresholdnumber0.005Variance smaller than this share of budget reads as on plan and stays neutral.currencystring"$"Symbol placed before every amount. Amounts shorten to k and M.titlestring"Budget vs actual"Heading of the block.descriptionstring–Replaces the period description under the title.onPeriodChange(periodId: string) => void–Called when the reporting window changes.onDepartmentToggle(departmentId: string, open: boolean) => void–Called when a department opens or closes. Opening one closes the one that was open, which is reported first.classNamestring–Class on the root element.- Tab
- Moves to the period switch, then into the department list, then out of the block.
- Arrow leftorArrow right
- On the period switch, changes the reporting window.
- Arrow uporArrow down
- In the department list, moves to the previous or next department.
- HomeorEnd
- In the department list, jumps to the first or last department.
- EnterorSpace
- Opens or closes the budget lines of the department in focus.
- Each department is a heading with a disclosure button (aria-expanded, aria-controls) whose name is a full sentence: spent, budget, variance and whether it is favorable.
- The total and every budget line carry the same sentence in visually hidden text; the charts and the counting numbers are hidden from assistive technology so nothing is read twice or mid-count.
- Changing the window announces the new window and the total through a polite live region.
- Variance never relies on color: amounts carry a sign and every share ends in over, under or on plan.
- No focus rings: the focused department shows a filled row.
- Switching the window springs every bar to its new length on one critically damped spring and counts every amount and share to the new value, all written to the DOM from motion values.
- The overspend is the same bar clipped to the space past budget, so the danger color appears exactly as the bar crosses the tick, with no second animation to keep in sync.
- Opening a department grows its lines in height and opacity together without overshoot; closing is faster. The chevron turns on the shared spring curve.
- Every animation is interruptible: a new window or toggle starts from wherever the bars and numbers are.
- Reduced motion jumps bars and numbers to their final values and opens lines at full height.
- From a 760px container the block is a table: name and owner, the bullet chart, actual, budget, variance and the disclosure chevron in aligned columns.
- Below that each row puts the name, its actual of budget and the variance on top and the bullet chart across the full width below, so the chart never gets squeezed.
- Long names wrap instead of truncating. The period switch fills the width on phones.
- Rows are at least 60px tall and the switch grows to 44px on touch screens.
- Bars animate transform only (scaleX from the left edge); bands and ticks are static percentage positions, so a window change never measures layout.
- Numbers count on motion values that write text content directly, so a window change renders React once, not once per frame.
- Department and total figures are memoized per window; the shared scale is computed once per data set.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for cost centers where spending under budget is favorable. Every department and line is read as an expense.
- Pass one amount per period id for both budget and actual on every line; departments and the total are summed, so they always reconcile.
- The scale is shared by every row and every period (at least 120 percent of budget, rounded up to fit the largest line), so the budget tick never moves when the window changes.
- Bands mix the text color and the overspend uses the danger token, so the block stays neutral in any accent. The accent marks only the open department's chevron and the selected window.
- The first render formats every number from props, so server and client match.
The full library index for assistants is at /llms.txt.