Centered Light Tier Selector CTA Block for React

Edit the AMOUNTS array at the top of the file: each cell has its dollars, a tier name and a value string that identifies it. The band is five columns, so keep four amounts plus Custom, or change grid-cols-5. MIN_CUSTOM and MAX_CUSTOM set the range of the Custom field, and whatever is typed is kept inside it for the button, so the label never says a figure the field wouldn't accept. The first cell chosen is the initial state of choice, "10": keep it among the values, or no cell starts chosen. SPONSORS and RAISED feed the line under the stack, and the overflow avatar counts the sponsors beyond the five initials shown.

The button is a real link, so point its href at your checkout and add the amount to it, for example /sponsor?amount=25&interval=month, then let your server create the recurring price. The block keeps the amount in one value, amount, which is the cell's dollars or the Custom field kept in range. The call to action is a ShineButton with render set to an a element and nativeButton={false}.

Yes. The cells are a radio group named "Monthly sponsorship amount": Tab moves to the chosen cell, the arrow keys move and choose, and the chosen one is the one with the rule across its top. The Custom field is named "Custom monthly amount, in dollars", and its plus and minus buttons step it. The figure in the button keeps its value in text for screen readers, so the link reads "Sponsor for 25 dollars a month" rather than a row of digits, and the stack of initials is hidden because the line beside it says the same. On a phone the tier names are hidden, so each cell reads as its amount.

Nothing moves. The note under the band ("Billed monthly. Cancel from your dashboard.") and the Custom field share one grid cell, and the one that isn't shown is hidden and made inert, so it can't take focus or be read. The cell is as tall as the taller of the two, and the field takes its place when Custom is chosen.

The parts fade and lift in once when the block loads, and the digits of the button's figure roll to each new amount. With reduced motion set, the entrance is skipped and the digits change in place.

Yes. The cells run in reading order, and the amounts and the totals are set left to right in their own boxes, so "$25" and "$2,400" never reorder.