Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Referral Program Dashboard Block for Radix UI

A payout board of nine referrers in Pending, Approved and Carried over lanes, a minimum payout field that carries small earnings over, and a button that approves the ticked payouts.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Decide who gets paid this cycle, with this referral payout board for React with Radix UI. A hairline frame with a plus mark on each corner holds three lanes on shared hairlines: Pending, Approved and Carried over, each with its count and total. Every referrer is a card with their initials, a referral code, how many of their referrals signed up and what they earned at a typed reward for each sign-up. A Number Input for the minimum payout sits in the first band: anyone under it moves to Carried over by rule, and changing the number moves cards at once. Pending cards have a Checkbox; the foot's Shine Button "Approve 3 payouts" moves the ticked ones to Approved and says that no money moved. The sentence gives the referrals and the conversion rate. Each lane scrolls inside a fixed height, so moving cards never shifts the page, and below the medium breakpoint the lanes scroll sideways with the next one showing. It's built from Number Input, Checkbox, Avatar, Empty, Shine Button and Guides. For growth teams running referral rewards.

FAQ

How do I load my own referrers?

Edit REFERRERS. Each has an id, initials, a referral code, how many people they referred and how many signed up. Earnings are the sign-ups times REWARD, in cents, and the lanes, totals, the sentence and the conversion rate are all worked out from those rows.

How does the minimum payout work?

Anyone not yet approved whose earnings are under the minimum is in Carried over; everyone else not approved is Pending. Lowering the minimum brings carried-over cards back to Pending, and raising it sends pending cards over, dropping their tick. The field takes whole dollars from 0 to 500.

What does Approve do?

It moves the ticked pending referrers to Approved in this page and says how many and how much, "no money moved". With nothing ticked it says to tick one first. In your app approving would queue the payouts with your payment provider and record who approved them.

What stays local, and how do I wire it for real?

The referrers are typed and the minimum, ticks and approvals are component state. To wire it up, load referrers and their sign-ups for the cycle, send approvals to a server action, and keep carried-over earnings in your ledger for the next cycle.

Can I use it with a keyboard?

Yes. Each lane and the board can be focused and scrolled with the arrow keys, every checkbox is named for the referral code, and the minimum is a number field that updates the lanes as you type.

All 200 dashboard blocks