shadcn.io is not affiliated with official shadcn/ui
Early Bird Pricing Block for React
Founder seats that run out: '163 of 200 claimed' at display size over a bar of forty segments, with the one founder plan, its struck regular price and its lifetime price beside the features.
Installation
Overview
Sell scarcity you can see with this early-bird pricing section. The seats meter is the hero: "163" at display size, "of 200 founder seats claimed" beside it and "37 seats left" at the end of the row, over a bar of forty segments that stand for five seats each. Thirty-two segments are full, the next is part-way, and the rest are empty, so the count reads from across the room. Under it sits the one founder plan for a scheduling app, drawn as two cells that share a hairline: the plan (a struck $299, the $149 lifetime price, an outline Save 50% Badge and the block's one primary Shine Button) beside its ten features in two columns. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top, and the meter and the plan row ruled with a + at each corner. Built with Badge, Button, Status, Shine Button, Guides and Lucide icons, with CSS transitions only. For lifetime deals, founder pricing, limited cohorts and beta seats.
FAQ
How do I change the seat count, the price and the features?
Edit the constants at the top of the file. TOTAL_SEATS and SEATS_CLAIMED drive the big number, the seats left and the segments: there is one segment for every SEATS_PER_SEGMENT seats (five), and each segment's fill is worked out from the claimed count, so 163 of 200 shows 32 full segments and one three-fifths full. PLAN holds the price, the struck regular price and the button's text; the saving's percentage is calculated from them. FEATURES is the list of features.
Is the seat count live?
No. It's data in the file, so it shows the same number to everyone until you change it. To make it live, read the real count on your server (a database count of founder licences, for example) and pass it in as SEATS_CLAIMED, then revalidate the page, or cache it for a minute. Never show a count you haven't earned: a seats meter that doesn't move is worse than none.
What happens when the seats run out?
The block doesn't handle it: at 200 of 200 the meter is full, "0 seats left" shows and the button still links to checkout. When your count reaches the total, swap the call to action for a waitlist link and the struck price for the regular one, or remove the section. The 40-segment bar and the number stay correct at any count.
How do I connect the button to checkout?
The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at a checkout for the lifetime price and, on your server, stop selling it when the founder seats are gone.
Is the meter accessible?
The segments are decorative and hidden from assistive technology; the number, "of 200 founder seats claimed" and "37 seats left" are real text, so a screen reader hears the same count a sighted visitor reads. The struck price is read as "Was $299, now $149". The segments fill from their start on first paint with a short stagger, and under reduced motion the bar is drawn full at once.
How does it look on a phone?
The count, the seats left and the bar stack in one column, and the segments get narrower so all forty fit at 320 px. The plan's price and button come before the features. Below md only the first five features show, with an "All 10 features" button (aria-expanded) that reveals the rest; from md all ten show in two columns beside the plan.
Related
- Pro
Countdown Offer Pricing
Discounts and offersA launch price on a clock: a live countdown in days, hours, minutes and seconds at display size beside the headline, over three plans for a music app, one of them discounted. A Segment Group shows one plan at a time on a phone.
- %Pro
Seasonal Sale Pricing
Discounts and offersA seasonal sale for a stock-photo library: an oversized '−41%' stamp in the header row under an 'Autumn sale' ribbon, over three plans in shared-hairline cells with struck prices and the sale price at display size.
- Pro
Ticket Stub Pricing
Single planA one-time lifetime pass for a course library drawn as a ticket: a main stub with the pass and what it opens, and a perforated tear-off stub with the price, the saving, a barcode and the claim button.
- Pro
Minimal Single Plan Pricing
Single planThe quietest single plan: one card in a card with a launch price beside the struck-out regular price, one call to action and six included features, under a short centred header.
- Pro
Featured Plan Pricing
Single planOne plan in the spotlight: an oversized card under a monochrome cone of light with the price as the largest type on the page, a monthly and yearly switch, and a short pitch beside it.
- Pro
Pricing With Guarantee
Proof and guaranteesA free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.