shadcn.io is not affiliated with official shadcn/ui
Pay Breakdown Success Block for React
A pay-run confirmation page: net pay as the headline figure, a stacked bar of gross pay split into net pay, taxes, benefits and retirement, a legend table, and a toggle between the pay period and the year to date.
Installation
Overview
Show an employee where their pay went with this payroll confirmation page for React with Base UI. It's the page Paperleaf, a payroll service, shows once a pay run is processed: the page's side rails and one band frame it, a success mark and a headline say the pay period is done, and one framed card holds the breakdown. A headline figure gives the net pay, a Toggle Group switches between This period and Year to date, and a bar draws the gross pay split into net pay, taxes, benefits and retirement in foreground weights, each segment as wide as its share. A table repeats every line with its amount and share and ends on the gross pay. A list under the card gives the deposit date and the account, and the Shine Button opens the earning statement, the only colored control. It's built from Toggle Group, Shine Button and Guides, with a CSS entrance only. For payroll, benefits and any pay statement.
FAQ
What stays in the page, and how do I wire it for real?
Nothing is paid and nothing is read from a payroll system: the amounts are example figures typed in PERIOD and YEAR, in cents, and the toggle only changes what the page shows, announcing it in a polite status message. To wire it, replace those two objects with the figures from your payroll run (gross, taxes, benefits and retirement for the period, and the same for the year so far), set the deposit date and account, and point the button at the statement.
How are the shares worked out, and why do they add up?
Each line is divided by the gross pay and the shares are rounded by the largest-remainder method, so the four shares always add to exactly 100 (this period they read 68, 21, 5 and 6). The bar's segments use those same whole numbers, so the drawing, the table and the sentence read out the same figures. Net pay is never typed: it's the gross pay minus the three deductions.
What does the toggle change, and does the page move?
It re-derives everything from the other set of amounts: the headline figure, the line under it, the bar, the table and the sentence read out for assistive technology. The segments slide to their new widths with a CSS transition, which reduced motion turns off, and the layout never moves: the amounts sit in fixed, right-aligned columns and the caption fits one line in both views. A choice can't be un-chosen, so one view is always on.
Is the bar accessible?
The bar is a drawing, so it carries one sentence for a screen reader ("Of $5,240.00 gross pay, 1 to 15 Oct: net pay 68%, taxes 21%…") and the table beside it is the real data, with a caption, column headers and the line names as row headers. Segments differ by weight (solid to pale), never by hue, and every one has its swatch in the table.
Related
- Pro
Payout Route Success
Payments and refundsA full-height confirmation for a payout that is on its way: three stops from the platform through the processor to the bank, each with its day and an arrival window that skips weekends, and the gross, fee and net behind the amount.
- Pro
Approval Chain Success
People and approvalsAn expense-report confirmation page: the report's number, date, category and total, the approval chain down a rail with a word for where it stands, the attached receipts, and a withdraw button that says so in the chain.
- Pro
Benefits Enrollment Cost Success
People and approvalsA confirmation page for chosen benefits: a ledger of three plans with who each covers, what the employer pays and what you pay each pay period, and a twelve-week strip from today to the day cover starts with the enrolment deadline marked.
- Pro
Account Restored Invoice Success
Payments and refundsA full-height confirmation for a paid overdue invoice: a framed before and now pair of the same four capabilities, locked while the account was suspended and unlocked in turn now, then what was settled, with what and when the next invoice goes out.
- Pro
Credit Balance Success
Payments and refundsA narrow full-height confirmation for added credit: the new balance counting up from the old one with the change beside it, and a ledger of the credit by expiry that marks the batch used first.
- Pro
Updated Card Billing Success
Payments and refundsA billing panel confirming a new card: the card drawn in greyscale with its real facts, and a switch per subscription that picks which of them it pays for, with the next charges on the card adding up as you flip them.