shadcn.io is not affiliated with official shadcn/ui
Affiliate Approved Success Block for React Aria
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.
Installation
Overview
Tell a new partner what their link earns, with this affiliate approved page for React with React Aria. It is the Saltcellar Partners screen after an application was accepted, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over three cells split by hairlines: the referral link with a Copy Button that really copies it, a tier table (15% up to 100 sales a month, 20% up to 500, 25% above) with the current tier marked, and a Slider named Sales a month that works out the tier and the estimated monthly earnings from a typed average order. The one primary is the Shine Button Open the partner portal, pinned to the foot of a phone's screen. For affiliate, referral and partner programmes.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was approved and no account was opened. The link, the three tiers and the average order ($48) are typed constants, and the slider only recalculates numbers on the page. To wire it, create the partner on your server, return their real link and tier rules, and point the portal button at your partner dashboard. The copy button copies the sample link for real.
How is the estimate worked out?
Sales a month times the average order times the tier's rate, in whole cents, shown in dollars. The tier comes from the sales: up to 100 is Starter at 15%, up to 500 is Grower at 20%, and anything above is Partner at 25%. It is labelled an estimate, and a real programme should say whether refunds and the cookie window change it.
How does the slider work with a keyboard and a screen reader?
Arrow keys move it by ten sales, Home and End jump to the ends, and its value text reads "250 sales a month, 20 percent". The live line speaks the tier and earnings once, when you finish moving it, rather than on every step.