shadcn.io is not affiliated with official shadcn/ui
Loyalty Tier Success Block for React
A tier-unlocked page for a rewards program: a drawn membership card beside the message, points toward the next tier, and a table of perks for the tier now and the tier next.
Installation
Overview
Celebrate a customer reaching a new tier with this confirmation page for React with Base UI. It's the page Beanhouse Rewards, a coffee chain's loyalty program, shows when a member reaches Gold: the page's band is split by a divider, with the message at the start and a drawn membership card at the end, in a drafting frame of plus marks. The card is greyscale UI, never a photo: the program's name, the tier, the points, the member's initials and name and the join date, with the same facts written under it for assistive technology. The message carries a success mark, the headline, a bar of points toward Platinum (worked out from the points) and a table of perks, one row each for Gold now and Platinum next, with a check or a bar and the words "Not included". On a phone the card sits above the table. The Shine Button opens the member's rewards, the only colored control. It's built from Progress, Shine Button and Guides, with a CSS entrance only. For loyalty programs, memberships and tiered plans.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was upgraded: the member, their points and the perks are typed in MEMBER, NEXT and PERKS, and the page has no state. To wire it, read the member from your loyalty system (name, points, tier, join date), set NEXT to the next tier and its threshold, and list the perks of the two tiers with whether each tier has them. The bar's share and the points to go are worked out from the points and the threshold, so they follow.
Why is the card drawn instead of a picture?
A drawn card follows your theme in light and dark, stays sharp at any size and needs no image rights: it's a few boxes and a faint hatching in foreground tones, hidden from assistive technology, and the caption under it says the same in words. Replace the mark in the card's corner with your own logo where the code marks the icon slot.
How are the perks shown without color?
Each tier's cell is a check with the hidden word "Included", or a bar with the hidden words "Not included", so the table reads the same in a screen reader and in grey. The table has a caption, column headers (Gold now, Platinum next) and the perk names as row headers.
Where does the progress bar's share come from?
From the points divided by the next tier's threshold, rounded to a whole percent: 2,500 of 5,000 is 50. The line above the bar says the same in words ("2,500 of 5,000 points", "2,500 to Platinum"), so the bar itself is decoration and is hidden from assistive technology.
How does it look on a phone?
The message, the card, then the progress and the table stack in that order, the card's caption goes quiet (it stays for assistive technology), and the Shine Button is pinned to the bottom of the screen while the page scrolls under it, so it is on the first screen. From the large breakpoint up the card sits at the end of the band, behind the divider.
Related
- Pro
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.
- Pro
A page for the week weekly active users passed 10,000: a greyscale medal, a line of twenty weeks with the crossing marked and described in text, a ring of the way to the next milestone, and a quiet fall of confetti.
- Pro
A panel for a reading streak kept alive: the streak counted up to 14 days, a progress bar to the Weekly Warrior badge, and a five-week table of days read, missed and still to come.
- Pro
A page for a revenue goal passed at 108%: a bullet chart with a tick at 100%, three sub-goals each with a signed difference, a group of buttons that raises the next target by 10, 20 or 30 percent, and a Celebrate button that throws confetti.
- Pro
Plan Upgrade Success
Plans and limitsAn upgrade confirmation page: Free and Pro side by side in one card with the limits that changed and how much each grew, the start and renewal dates, and a quiet fall of confetti that stops with reduced motion.
- Pro
Seat Allocator Success
Plans and limitsA full-height confirmation for seats bought in bulk: four teams with steppers that can never take more than were bought, a bar and an unassigned count that follow them, a Save allocation button with a local result, and the order beside it.