shadcn.io is not affiliated with official shadcn/ui
Referral Reward Notification Block for React
A fitness app's referral ladder: a progress bar with ticks at 1, 3 and 5 friends, the credit earned as a rolling figure, three rungs marked Reached or Next, and an invite link and message you can copy.
Installation
Overview
Turn a referral program into a ladder people can see themselves climb with this reward notice for React with Base UI. It is Rallymoor, a fitness app, in a hairline frame with plus marks at its corners. The first band shows "3 of 5 friends joined" with the credit earned, $45, as a rolling figure, over a Progress bar with ticks at 1, 3 and 5 friends and three rungs that say Reached or Next in words with their reward. The second band holds the invite link in a read-only field with a Copy Button. Invite more, the one Shine Button, copies a typed message to the real clipboard. For referral programs, loyalty ladders and invite screens.
FAQ
How do I use my own program?
Edit JOINED, GOAL, PER_FRIEND (dollars), RUNGS (friends needed and reward), LINK and MESSAGE. The credit earned, the bar, the ticks and the next rung are worked out from them.
How are the rungs told apart without colour?
A reached rung has a check and the word Reached with a heavier outline, the next one says Next and the rest say Locked. The bar is a solid fill with solid ticks, and its label reads "3 of 5 friends joined".
What do the copy buttons copy?
The small button copies the full link (https://rallymoor.example/join/dana-4k7q) and Invite more copies a typed message that includes it, both to the real clipboard, with a status line saying which. If the clipboard is blocked the message says to copy by hand.
Related
- Pro
A plant shop's 30% off coupon drawn as a notched ticket, with a code you can copy to the clipboard, an end date, folding terms and a claim button that says it only applied the code in this demo.
- Pro
A subscriber milestone notice for a newsletter platform: 10,000 in a rolling number with a Replay from 9,999, a CSS ruler with ticks at 1k, 5k, 10k and 25k that names the next mark and what is still to go, and a thank-you post you can copy.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.
- Pro
Alert Banner Notification
Incidents and alertsAn operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.
- Pro
Announcement Notification
Floating cardsA what's new card for a product analytics app: three updates in a carousel with Previous, Next and the place in words, a Don't show this again box, and a Dismiss that folds the card.