shadcn.io is not affiliated with official shadcn/ui
Add-on Bundle Pricing Billing Block for React Aria
Four add-ons as check rows under a discount ladder (10%, 20% and 25% off for two, three and four), each row showing what it nets once the bigger or smaller discount re-applies, with the subtotal, saving and total.
Installation
Overview
Show what the next add-on really costs, with this add-on bundle for React with React Aria. A compact header sits over one hairline frame with a plus mark on each corner. The first band is a ladder of four rungs, one add-on with no discount, then two, three and four add-ons at 10%, 20% and 25% off everything. Each rung's bar fills as you pick, and a line says how many more reach the next. Under it four add-ons are rows with a Checkbox in your foreground color, a price and a line on what each does. Every row also says what it nets after the discount re-applies, "Adds $8.40 net" for an unticked add-on and "Costs $9.60 net" for a ticked one, because the discount moves for all of them at once. A list works out the subtotal, the bundle discount and the total a month. The only Shine Button, "Update bundle", sits in a foot with a status line and an outline Discard. It's built from Checkbox, Field, Shine Button and Guides, with a CSS entrance only. For add-on shops, plan settings and checkout.
FAQ
How do I change the add-ons and the ladder?
Edit ADD_ONS (an id, a name, a line of detail and a price in cents) and LADDER (the number of add-ons and the percent off everything) at the top of the file. SAVED is the bundle the account has now. The rungs, every net cost, the subtotal, the saving and the total are derived from them.
What does Adds $8.40 net mean?
The discount is not per add-on: it applies to the whole bundle and grows with the count. Adding a third add-on raises the subtotal and also moves everything from 10% to 20% off, so it costs less than its own price. Each row compares the total with it and without it, and shows the difference.
What does Update bundle do, and what stays local?
It keeps the ticked add-ons as the saved bundle and says it takes effect at the renewal date; nothing is charged or sent. With nothing changed the button stays focusable and says so. In your app, send the ids to your billing provider in save, schedule the change for the renewal and show the provider's answer in the same status line.
How are the checkboxes wired on each library?
isSelected and onChange, and each row is a label with the name and detail tied to it.A ticked box is solid foreground, never the primary colour, so the Shine Button stays the one primary.Is it accessible?
Each row is one label, so the name, the detail and the net cost are read together and the whole row is the target. The ladder is an ordered list with the current rung marked, the bars repeat what the words say, and the status line is a polite live region that is present from the start.