shadcn.io is not affiliated with official shadcn/ui
Referral Accepted Success Block for React
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 Base 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.
Related
- Pro
A full-height confirmation for an approved partner: a referral link with a real copy button, a commission tier table with the current tier marked, and a Sales a month slider that works out the estimated monthly earnings.
- Pro
Invite Accepted Roster Success
People and approvalsA confirmation page for a teammate joining: who invited them and when, how many seats are used, and a roster where the new member's row is marked Joined and holds a role select that changes the role sentence below.
- Pro
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.
- Pro
Referral Invite Sheet
Side sheetsA meal-kit box page with its referral sheet shown open from the end edge: a code and a link that really copy, a friend's email and the message that would go with it, a reward ladder marked Reached or how many friends to go, and three figures.
- Pro
Link and QR Referral Contact
Partners and creatorsA refer-a-friend split: a personal link with a Copy Button and a QR code of it, a reward bar toward a free box, and a form that invites one friend.
- Pro
Referral Code Onboarding
Profile and accountA setup panel that loads with a friend's code applied, shows what it takes off the first invoice, and lets a different code be tried, with copyable sample codes.