shadcn.io is not affiliated with official shadcn/ui
Centered Light Tier Selector CTA Block for Vue
A centred sponsorship call to action for an open-source project: a band of five amount cells on shared hairlines, a Shine Button that names the chosen monthly amount, a Custom cell that opens a number field in the same space, and a closing band that counts the sponsors.
Installation
Overview
Ask visitors to pick an amount before they click with this centred tier selector call to action, for Vue with Ark UI. A compact centred header ("Keep Hollowpine free for everyone") sits between the page rails, then a band of five cells on shared hairlines built from a Segment Group: $5 Friend, $10 Backer, $25 Champion, $50 Patron and Custom. The chosen cell gets a rule across its top and a raised tint instead of a fill, so the primary colour stays on the one button. The Shine Button names the amount, and its figure rolls to each new value with Sliding Number. Choosing Custom swaps the billing note under the band for a Number Input in the same space, so nothing moves. A closing band holds an Avatar stack with the sponsor count and the monthly total. On a phone the cells keep their amounts and drop their tier names. Built with Segment Group, Number Input, Sliding Number, Shine Button, Avatar, Guides, Lucide icons and Tailwind CSS, with CSS transitions only. For open-source homepages, membership pages, donation bands and any call to action where the visitor picks a monthly amount first.
FAQ
How do I change the amounts and the custom range?
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.
How do I send the chosen amount to a payment or sponsorship page?
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.
Is the amount picker accessible?
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.
What happens to the layout when Custom is chosen?
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.