shadcn.io is not affiliated with official shadcn/ui
Bulk Discount Table Billing Block for React
A seat price table by tier, and a 12-month staircase of seats from a growth rate you set, drawn over the tier bands, with the month your tier changes and what the bill does there.
Installation
Overview
Show when growth changes the price, with this volume pricing for React with Base UI. A compact header sits over one hairline frame with a plus mark on each corner. A Number Input, "Seats you add a month" (two, from 38 now), moves a hand-built staircase of seats over the next 12 months, drawn over four bands for the tiers. The month the tier changes is marked, and a sentence says what the bill does there: every seat costs the rate of the tier the count reaches, so passing 50 seats in May 2027 takes the bill from $750 (50 seats at $15) to $624 (52 seats at $12). A native table lists the tiers, 1 to 10, 11 to 50, 51 to 200 and 201 and up, with the price per seat, a swatch of its band, "Your tier" and the month a tier is reached. The monthly seats and bills are in a table for screen readers. The only Shine Button follows the first crossing, "Plan for 52 seats". It's built from Number Input, Badge, Shine Button and Guides, with an SVG figure and a CSS entrance only. For per-seat products, volume plans and capacity planning.
FAQ
How do I change the tiers and the starting point?
Edit TIERS (a label, the price per seat and the highest seat count in the tier), NOW for the seats today, and START_MONTH, START_YEAR and START_ADD for the first month and the default growth. The bands, the staircase, the crossing month, the sentence and the button's label are derived from them.
Why can the bill go down when I add seats?
Because every seat is charged at the rate of the tier the whole count reaches, not the seats above a threshold. At 50 seats each costs $15, which is $750; at 52 seats each costs $12, which is $624. The sentence under the figure shows the pair at the first crossing, and it stays true when your growth rate changes.
What does the button do, and what stays local?
It says the plan is noted for the month the tier changes, or that you stay in your tier; nothing changes in the account. In your app, save the plan in plan and show the result in the same status line.
Is the figure accessible?
The drawing is hidden from assistive technology and the same facts are in text: the sentence, the tier table, and a table of the seats, the price per seat and the bill at the end of each month. The line is solid and each tier has a swatch and a label, so nothing depends on colour.