Addon Builder Pricing Block for React

Edit the constants at the top of the file. BASE_PLAN has the plan's name, per-seat price and features. ADDONS lists the modules: each has an id, a name, a one-line description, a per-seat price and a Lucide icon. STARTING lists the ids switched on when the page opens; empty it to start from the base plan alone. The total, the "3 of 6 add-ons on" count, the breakdown line and the button's label are all worked out from the selection, so they can't disagree. CURRENCY is the symbol written before every price.

Both call to action buttons, the one in the grid and the one in the phone's bar, are real links: build their href from the selected ids, for example /checkout?plan=base&addons=sequences,call-ai, and let your server turn the plan and each add-on into a line item with its own price, so the invoice lists every module. Each is a ShineButton with render set to an a element and nativeButton={false}.

Yes. Each add-on cell is a toggle button that reports whether it's pressed, named by its own text: the add-on, its price "per seat per month" and its description. The cells sit in a group named "Add-ons, per seat per month"; Tab moves from cell to cell and Space or Enter switches one. After each change a polite live region says how many add-ons are on and the new price per seat, and the large price keeps its amount in text a screen reader can read while its digits roll. A selected add-on isn't marked by colour alone: it has a filled check and a dark icon tile.

The grid becomes a single column in the order a buyer works in: the Base plan, then the six add-ons, one cell each. The price in the grid is hidden, and a bar sticks to the foot of the screen while the section is in view with the price per seat, how many add-ons are on and the call to action, so the button is on the first screen however far down the add-ons the visitor is. The bar is position: sticky inside the section, so it leaves with it and never covers the next one.

Keep its id in STARTING and disable its toggle, so it shows as selected and counts in the price but can't be switched off: set disabled on that Toggle. Say why in its description ("Included with Forecasting"), since a disabled control isn't explained by its look alone.

Use an add-on builder when your product has distinct modules that different customers need in different combinations: the base price stays approachable and teams add only what they sell with. Fixed tiers work better when features depend on each other or most customers need the same bundle, since every extra choice slows the decision down.