shadcn.io is not affiliated with official shadcn/ui
Link and QR Referral Contact Block for React
A 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.
Installation
Overview
A referral section for React with Base UI for a stationery club, as a split behind a solid divider that meets the top rule with a plus. At the start, after a short header: a framed figure with the visitor's personal link as copyable text, a Copy Button and a QR code of the same link (drawn small, black on white so a phone camera reads it), then a ruled band with the reward so far ("2 of 3 friends joined", "A free box, shipped with your next one") and a bar toward it. At the end: one friend's name, email and how you know them (a select), checked on submit with each problem under its field and focus on the first one, then a confirmation in the same space that names the friend and the link that goes with it. A three-step "How the free box works" list closes the end column. On a phone the link and the code come first, then the reward, then the form. It's built from Copy Button, Qr Code, Progress, Select, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour; the bar fills with the foreground colour. For subscription boxes, clubs and apps that grow by invitation.
FAQ
Where does the personal link come from?
It's a constant at the top of the file (LINK_TEXT): pass in the visitor's own link from your referral service. The QR code and the Copy Button are both built from the same value, so changing it changes all three. The domain is a reserved .example name, not a real site.
Why is the QR code black on white in a dark theme?
A QR code needs a light background with a dark pattern to scan, so the catalog's QR code keeps black on white in every theme; the block gives it a quiet margin and a hairline ring so it sits cleanly on a dark page. It has an accessible name, and the link under it is plain text for anyone who can't scan.
What does the Copy Button tell a screen reader?
It copies the full link to the clipboard, swaps its icon for a check, and announces "Link copied" through its live region; the visible label stays "Copy link". The link is also selectable text, so nobody depends on the button.
Does the reward move after I invite someone?
No, and the confirmation says so: it says "When they join, your count here goes up by one". JOINED and NEEDED are constants at the top of the file for you to bind to your own count; the bar and the text both read from them. An invitation does not change the count until the friend joins.
Related
- $10$10Pro
Stacked Referral Invite Banner
Stacked cardsA referral card for a savings app: a heading, two reward cells (You get, A friend gets) joined by an arrow, and the invite link in a field with a Copy link button.
- Pro
QR Download Split Banner
Split calloutsA scan-to-install callout for a mobile app: a real QR code in a card in card with a caption, beside the heading, one sentence and links to both store listings.
- Pro
Subscribe or Write Contact
Join and giveA card in card with a switch between two real forms, subscribe (an email and how often) and write to us (name, email and message), that never changes size and confirms in place.
- Pro
Amount Presets Donation Contact
Join and giveA donation card in card: amount presets in a 2x2 grid beside a custom amount, a monthly switch, an impact line that rolls with the amount, a card-fee box and a total the button repeats.
- Pro
Centered Seat-Capped Invite CTA
Urgency and limitsA centred card-in-card CTA with a tags input of teammate emails that stops at the seats a plan has left, ten seat dots that fill as you add chips and a Shine Button that counts the invites.
- Pro
Card in Card Contact
Contact formsA card-in-card contact section for a bookkeeping service: the details of the desk you pick beside a raised form with a live message counter.