shadcn.io is not affiliated with official shadcn/ui
Referral Funnel Billing Block for Radix UI
A referral funnel for one account: the referral link with a button that copies it, three bars for clicks, sign-ups and paying friends with the conversion rate and drop-off at each step, a month switch and what the month earned.
Installation
Overview
Show customers how their referrals are doing, with this referral funnel for React with Radix UI. The first band has the account's link in a read-only Input Group and a Shine Button, "Copy my link", which writes the link to the clipboard for real and says so. Under it a Toggle Group switches between this month and last month, and three bars show clicks, sign-ups and paying friends, each with its count, the share of the step before it and how many dropped out; every percentage is worked out from the counts. A side cell shows what the month earned in Sliding Number digits, with the paying friends and the commission each. The frame's corners and bands are drawn by Guides. For growth tools, newsletters and any product with a referral link.
FAQ
How do I use my own numbers?
Edit PERIODS (clicks, sign-ups and paying friends for each period), LINK and PER_FRIEND. The bar widths, the percentages ("15.0% of clicks"), the drop-offs and the amount earned are all derived, so only the three counts per period are typed. Fetch the counts from your own analytics and keep the same shape.
Does the button really copy?
Yes. It calls navigator.clipboard.writeText with the link and reports the result in a polite status line under the field; if the browser refuses (an insecure page, a blocked permission) it says so and tells the visitor to select the link and copy it by hand. The field is read-only but selectable.
What does the period switch do?
It swaps the example counts and recalculates the three bars, the rates and the earnings, and announces the change. It always keeps one period chosen. The pressed period is drawn in the foreground tone, so the Shine Button remains the only colored control.
What stays local?
The figures are examples and nobody opened this link. The only real action is the clipboard write. To wire it up, replace PERIODS with your analytics, show the account's real link and keep the Copy button as it is.
Is the funnel accessible?
The bars are decoration; each step is a heading with its count and a sentence that carries the same facts. The step list is an ordered list, the switch is a named group and the copy result is announced. Nothing depends on color, and the bar widths change without motion when reduced motion is set.