shadcn.io is not affiliated with official shadcn/ui
Referral Accepted Success Block for Radix UI
A full-height split confirmation for an accepted referral: the invite link with a real copy button and Go to credits on one side, two initials avatars joined by a $20 credit chip and a five-dot track towards a free month on the other.
Installation
Overview
Reward both people in a referral, with this referral accepted page for React with Radix UI. It is the Coinbrook screen after a friend joined from an invite, a whole screen with the page's rails and one band split in two by a divider. The first cell has the message: a check in a muted tile, the heading, a sentence, the invite link with a Copy Button that really copies it, and the one primary, a Shine Button named Go to credits, pinned to the foot of a phone's screen. The second cell draws the reward: two initials Avatars joined by a plus chip that reads $20 credit each, and a track of five dots, three filled, with the two more referrals it takes to earn a free month. On a phone the track goes under the link. For budgeting, fintech and subscription apps.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was credited. The friends, the invite link, the $20 amount and the goal of five are typed constants, and the only live control is the copy button, which copies the sample link for real. To wire it, read the count of accepted referrals and the credit amount from your billing records and render the dots from that list, and point Go to credits at the account's credit page.
How is the five-dot track read by a screen reader?
It is an ordered list: each dot has hidden text such as "Oswin Tarrant, joined" or "Next referral, still to come", and the visible line says "3 of 5" with the two that are left. The dots are shown filled or hollow, never by colour alone.
Does it work right to left?
Yes. The text and the cells follow the reading direction, names and amounts are isolated so they do not reorder, and the track itself keeps its left to right order because it counts upwards.