shadcn.io is not affiliated with official shadcn/ui
Loyalty Points Storefront Block for Radix UI
A points page for a coffee roaster: a balance, the last three earnings, a sample basket that shows the points it would earn, and four rewards you redeem against the balance with an Undo.
Installation
Overview
Show a shopper what their points are worth, with this loyalty page for React with Radix UI. A header names the page and says what Juniper Post is. A hairline frame with a plus mark on each corner has two cells: the balance as a headline figure, the last three earnings, a sample basket that adds up the points it would earn line by line (a point for every whole dollar, double on coffee) and the earn rules as a list; and beside it a short catalogue of four rewards, each with its cost in points and a Button to redeem it. Redeeming takes the cost off the balance; a reward that costs more says how many points are missing instead, and a status line with an Undo puts the last redeem back. The featured reward carries the one Shine Button. It's built from Button, Shine Button and Guides, with a CSS entrance only. For a loyalty account page, a rewards shelf or a shop's points explainer.
FAQ
How do I use my own rewards and earn rules?
Edit REWARDS (a cost in points, a name, a note and which one is featured), EARNINGS, BASKET (each line has its price in cents and a rate, the points per whole dollar) and RULES. The points for a line are floor(cents / 100) * rate, the basket total is their sum, and the reason under each reward is worked out from the balance.
What does Undo do?
It puts back the points of the last reward you redeemed and clears the record of it, one step. Redeeming again sets a new last reward. Redeeming a second reward before undoing means only the second can be undone.
What happens if I cannot afford a reward?
The button stays pressable (it is aria-disabled, not disabled, so keyboard and screen reader users can still reach it). Pressing it does not change the balance; the status line says how many more points the reward needs, and the line under the reward shows the same figure.
What stays local, and how do I wire it to real points?
The balance, the earnings, the basket and the rewards are typed sample figures, and redeeming only changes the balance held in the page. Nothing is ordered and no points are stored. To wire it, load the balance and earnings from your loyalty service, send the redeem from tap and use the response to set the balance and the status line.