shadcn.io is not affiliated with official shadcn/ui
Loyalty Tier Success Block for Radix UI
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 Radix 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.