ReportHeader
Entity, statement, period, basis, currency, as-of. Every figure states its basis.
npx shadcn add @lopifi/report-headerExamples
The same component, case by case. Each stage is the shipped code with the props it shows; switch to Code for the usage.
Consolidated, in thousands
A group statement presented scaled says so, and says per-share amounts are not.
Draft and provisional
An open period's numbers can still move, and the header says how far to rely on them.
Centered, compact
The printed-statement layout, at the size a header takes inside a pack or an export.
How it behaves
What it renders, what it refuses to render, and why. The same paragraphs as the family spec, so the two can’t disagree.
The title block every statement and report carries: entity (or consolidated group), statement name, period or as-of date, basis, framework, presentation currency, scale, provenance, and the states that limit how far a reader may rely on it.
Northwind Holdings, Inc. and subsidiaries ← entity / consolidation scope
Consolidated profit and loss ← statement name
For the three months ended 30 Sep 2026 ← resolved period, or "As of" for a balance sheet
Accrual basis · US GAAP · Presented in USD · In thousands, except per-share amounts
Generated 2 Oct 2026, 09:12 UTC · Period closed · Xero
[Draft] [Unaudited] ← states, in words
- The period is a union, not a string.
{ start, end }resolves to "For the month ended…", "For the three months ended…", "For the year ended…";{ asOf }resolves to "As of…". A balance sheet labeled with a month can't be written. Anything other than whole calendar months states both ends instead of guessing a name;periodLabeloverrides for a 52/53-week year. - Scale is stated whenever it applies, with "except per-share amounts" when asked, because per-share figures are never scaled.
- States are words in a tint: Draft, Provisional, Restated, Unaudited, printed in that order (least reliable first). They survive a grayscale print. A restated header names its reason beside the label.
consolidatedprefixes the statement name; the entity line still names the group.- Server-safe,
forwardRef, extends<header>. One heading holds entity and statement, so the accessible name is what the document is.align="center"for the printed convention,size="compact"inside a pack. Three sizes, two weights. - Exports
reportPeriodLabelandreportScaleLabel, so an export or a filename says the same thing the screen does.
The accounting it encodes
The concepts this component renders, each defined once in the lexicon.
More in Statements
See also
Where this component is specified, defined and running.
Elsewhere in the system
The live section ReportHeader renders in, the calculators behind its figures, and the ledger payloads that feed it.
- ReportHeader, runningThe statements showcase — live, with theme, density, grayscale and reduced-motion switches.
- StatementsNo component library ships a <BalanceSheet />. That's the biggest gap in the market, and the reason Lopifi exists. Specs for 16 React components: StatementTable, StatementRow, ProfitAndLoss, BalanceSheet and 12 more.
Components are copied into your repository and meant to be edited. Rounding policy, fiscal calendar and compliance copy differ per company.
Release notes
Get an email when Statements changes
Your copy doesn’t update itself when we fix something here.
- One email when a Statements component needs a migration
- Nothing when nothing changes
Or install it now
npx shadcn add @lopifi/report-header