shadcn.io is not affiliated with official shadcn/ui
Loyalty Tiers Carousel Block for React Aria
Four rewards tiers on a hairline track with perks and a progress bar along each foot, a points slider that re-fills the bars, re-derives your tier and the points to the next, and brings the tier it reaches into view.
Installation
Overview
Show where a member stands in a rewards programme and what the next tier unlocks, with this loyalty tiers carousel for React with React Aria. Perkwell, a rewards programme, has four tiers (Bronze from 0 points, Silver from 1,000, Gold from 2,500 and Platinum from 5,000). Each hairline cell has the tier's threshold, three perks and a progress bar along its foot; side by side the bars are the progress axis, each filling from the points between its threshold and the next one. The member's tier is marked "Your tier", and the foot says "You are Silver. 160 points to Gold." A Slider above the track tries other totals from 0 to 6,000 points: the bars re-fill, the tier and the gap are re-derived and the track brings that tier into view. "Back to 2,340" resets it. Two tiers show from the medium breakpoint, one with the next peeking on a phone. The programme and the figures are made up and no points move.
FAQ
How do I change the tiers?
Edit TIERS and MEMBER_POINTS. A tier has a name, a from threshold in points and its perks. The bars, the current tier and the gap to the next are worked out from the thresholds by fillOf, tierIndexOf and gapText, so nothing is typed twice. MAX_POINTS is the slider's top.
How are the bars filled?
A tier's bar is the share of the points between its threshold and the next tier's, in whole percent, clamped between 0 and 100. The last tier has no next, so its bar is full once you reach it. The words Reached, In progress and Locked say the same in text.
What does the slider do?
It tries a total, it does not earn anything. The label changes to "What if I had 4,100", the bars, the tier mark and the foot's sentence follow, and the track moves to the tier that total reaches. "In this demo, no points move."
How does it work with a keyboard?
Tab reaches the reset button, the slider (arrow keys change it by 10 points, Page Up and Page Down by more), Previous and Next. With focus in the track the arrow keys move it by one tier (mirrored in a right-to-left layout), and the slider stays outside the track so its keys are its own.
The step is Embla's slidesToScroll; the track re-measures when it changes.