shadcn.io is not affiliated with official shadcn/ui
Priced Add-ons Sponsorship Contact Block for Radix UI
A sponsorship builder: four priced add-ons with the reach each adds, a live total that rolls, the campaign goal and a form that confirms in place.
Installation
Overview
A sponsorship section for React with Radix UI for a newsletter. A start-aligned header opens on three framed cells whose hairlines overshoot their corners, with a + on each. The first lists four add-ons as checkbox rows (a mention in the newsletter, the logo on the site, a pre-roll read, a table at the live show), each with its price and a badge with the reach it adds. The second is the live total: a line for every add-on ("$400" or "Not added"), the sum in a large rolling number, and the estimated reach beneath it. The third asks for name, email, company and the campaign's goal (a select). On a phone the total sits right under the list. Submitting checks that at least one add-on is ticked and that every field is right, shows each problem and moves focus to the first one; a valid request turns the third cell into a confirmation in the same space while the total stays in view, so nothing moves. It's built from Checkbox, Field, Badge, Select, Input, Sliding Number, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For newsletters, podcasts, events and any publisher with a rate card.
FAQ
How do I change the add-ons and what they cost?
Edit ADD_ONS at the top of the file: each has a name, a line, a price in dollars for one run and the reach it adds. The total and the reach are sums of the ticked ones, and the "Estimated reach" figure in the header's sentence is the sum of all four. The prices and the reach are invented; the note under the total says reach is an estimate, not a promise: keep it only if it is true for you.
What does a screen reader hear when I tick a row?
The total cell has a polite status line that reads the count, the total and the estimated reach ("2 add-ons, $1,050, estimated reach 32,000") each time a box changes. The rolling numbers are decorative copies of it, hidden from assistive technology.
Do prices and reach read correctly in right-to-left layouts?
Yes. Every price is a single left-to-right span and the reach badges and counts are isolated with bdi, so digits and the dollar sign keep their order next to Arabic or Hebrew text.
Why are the cells' lines longer than the cells?
Each cell is drawn with Guides at its sm overshoot, so the hairlines run a little past the corners and a plus sits on each; the cells are 24 pixels apart (32 from lg) so neighbouring lines never touch, and the grid is inset from the rails so the overshoot never reaches them.
Where does the request go?
Nowhere yet: the submit handler waits 800 milliseconds, then shows the confirmation, which repeats the number of add-ons, the total and the goal. Replace the timer in submit with a call that sends details and picked to your sales inbox; the price list is also yours to check on the server.