shadcn.io is not affiliated with official shadcn/ui
Base Fee Breakdown Billing Block for React Aria
A table of the base fee's lines with two money columns, Now and From 15 Nov, where the platform line rises by $3 and both totals are added up; a segment switch puts one column in emphasis.
Installation
Overview
Tell customers what a price change means before it lands, with this base fee breakdown panel for React with React Aria. A table lists the fee's lines (platform access, included seats, SLA cover and support), each with what it is, and two money columns: Now and From 15 Nov. The platform line goes up by $3 and is marked by its sign and the word "changes", never by color alone, and both totals are added up from the lines, with a sentence under them giving the new fee and the percentage. A Segment Group puts one column in emphasis so the eye can follow one price down. On a phone each line becomes a card with the second column folded under the first. Shine Button Acknowledge the change is the only colored control, with a quiet link to other plans. The frame is ruled by Guides. It's built from Segment Group, a native table, Shine Button and Guides, with a CSS entrance only. For SaaS price changes, plan migrations and renewal notices.
FAQ
How do I fill it with my fee lines?
Edit LINES: each has a name, a hint, what it costs now and what it costs later, in dollars. A line of 0 reads "Included". Both totals, the difference and the percentage are summed from the lines, and the dates come from CHANGE and NOTICE (ISO dates in UTC, so every time zone reads the same).
What does the Now and From 15 Nov switch do?
It changes which column is in strong text on a quiet tint, in the table and in the phone cards; the other column recedes. It does not hide anything, so both prices stay readable. It is a real choice group, and arrow keys move between its two segments.
What stays local, and how do I make it real?
Acknowledging only changes the page: the button turns to "Change acknowledged" and the status line says it was noted in this demo and nothing was sent. To make it real, post the acknowledgement with the notice's id from the click handler and show the recorded date from the response. The See other plans link is a plain link to your pricing page.
Is the table accessible?
It is a native table with a name, column heads and each line as a row head, so a screen reader reads the line before its prices. A rise is written as "+$3, changes" next to the new price, in text. The totals are in the table's foot.
How does it look on a phone?
Below the small breakpoint the table is replaced by a list: each line shows its name and hint, then its two prices as a small description list with the emphasised one on the tint, and the total closes the list. The footer's status line, link and button stack, and the button keeps its width when its label changes.