Tax summary

Separates supplied assessment line items from authoritative totals in a semantic two-column table.

Preview

ProvisionalExample 204

Annual assessment2025
Item	Amount
Assessed amount	€ 300.00
Payment received	− € 60.00
Amount payable	€ 240.00

Payment date not supplied

In action

Review the assessment

Fictional amounts supplied by an example authority. The summary does not calculate tax.

ProvisionalExample 204

Annual assessment2025
Item	Amount
Assessed amountAs stated on the assessment	€ 300.00
Payment received	− € 60.00
Amount payable	€ 240.00

Payment date not supplied

When to use

Use it for

Tax assessments, municipal charges, and other supplied statements with separate line items and totals.
Pass fully formatted amounts, signs, currencies, period, payment timing, and status from the authoritative source.

Not for

Computing taxes, estimating refunds, summing amounts, or assuming a missing total is zero.
Generating a payment action or deadline without an application-owned destination or supplied terms.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { TaxSummary } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/tax-summary.

2. Vendor the source

npx @noorddev/vlak-cli add tax-summary

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/tax-summary.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { TaxSummary } from "@noorddev/vlak-react";

<TaxSummary label="Annual assessment" periodLabel="2025" reference="Example 204" status="Provisional" items={[{ id: "assessment", label: "Assessed amount", amount: "€ 240.00", detail: "Supplied by the example authority" }]} totals={[{ id: "payable", label: "Amount payable", amount: "€ 240.00" }]} dueLabel="Payment date not supplied" note="Fictional amounts; no tax calculation is performed" />

Props

TaxSummary

A supplied assessment with distinct line items and authoritative totals.

Prop	Type	Default
`label`required	`string`
`periodLabel`required	`ReactNode`
`reference`	`ReactNode`
`status`required	`ReactNode`
`items`required	`readonly TaxSummaryItem[]`
`totals`required	`readonly TaxSummaryTotal[]`
`dueLabel`	`ReactNode`
`note`	`ReactNode`
`itemsEmptyLabel`	`ReactNode`	`"Assessment lines not supplied"`
`totalsEmptyLabel`	`ReactNode`	`"Totals not supplied"`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Only supplied child controls enter the tab order and retain native keyboard behavior.

Accessibility

A caption names the table; scope attributes associate row and column headers with amount cells.
Line items use tbody and supplied totals use tfoot. Amounts remain literal readable text.
Missing line items, totals, reference, and timing have explicit text. No numeric or financial status is inferred.
Native div attributes and refs pass through; child action targets should be at least 44px.

Markup

<div class="rs-tax-summary" role="group" aria-label="Annual assessment"><div class="rs-tax-summary-header"><span class="rs-tax-summary-status">Provisional</span><span class="rs-tax-summary-reference">Example 204</span></div><table class="rs-tax-summary-table"><caption class="rs-tax-summary-caption">Annual assessment<span class="rs-tax-summary-period">2025</span></caption><thead><tr><th scope="col" class="rs-tax-summary-column">Item</th><th scope="col" class="rs-tax-summary-amount">Amount</th></tr></thead><tbody><tr><th scope="row" class="rs-tax-summary-row-label">Assessed amount</th><td class="rs-tax-summary-amount">€ 240.00</td></tr></tbody><tfoot><tr class="rs-tax-summary-total"><th scope="row" class="rs-tax-summary-row-label">Amount payable</th><td class="rs-tax-summary-amount">€ 240.00</td></tr></tfoot></table></div>

Classes

.rs-tax-summary.rs-tax-summary-header.rs-tax-summary-status.rs-tax-summary-reference.rs-tax-summary-table.rs-tax-summary-caption.rs-tax-summary-period.rs-tax-summary-column.rs-tax-summary-row-label.rs-tax-summary-amount.rs-tax-summary-detail.rs-tax-summary-total.rs-tax-summary-footer.rs-tax-summary-note.rs-tax-summary-actions