shadcn.io is not affiliated with official shadcn/ui
Affiliate Approved Success Block for React
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 Base UI. 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.
Related
- Pro
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.
- Pro
Payout Route Success
Payments and refundsA full-height confirmation for a payout that is on its way: three stops from the platform through the processor to the bank, each with its day and an arrival window that skips weekends, and the gross, fee and net behind the amount.
- Pro
Vendor Compliance Ledger Success
People and approvalsA confirmation panel for a vendor finishing onboarding: the portal address with a copy button, a table of four compliance documents with verified and valid-until days and a state, and a line on when the first to expire is chased.
- 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.
- Pro
Promo Code Popover Success
Payments and refundsA checkout summary with its promo chip and the popover shown open: which items the code covers, the minimum it needs, the discount and the new total worked out from the items, and one button that removes or applies the code.
- Pro
Credit Balance Success
Payments and refundsA narrow full-height confirmation for added credit: the new balance counting up from the old one with the change beside it, and a ledger of the credit by expiry that marks the batch used first.