shadcn.io is not affiliated with official shadcn/ui
Link and QR Referral Contact Block for Svelte
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 Svelte with Ark 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.