Referral Rewards TiersPRO

ComingSoon71: Referral Rewards Tiers

A Polaris referral coming-soon section (single accent color, square eyebrow) that centers an eyebrow, a heading, and a description over a referral progress bar, then lists reward tiers in locked and unlocked states and finishes with a dark seal-style share button.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon71?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon71?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon71.tsx.

Quick start

The installed file exports comingsoon71Demo alongside the block: the exact props behind the preview above. Spread it to get a working referral tiers page in one line.

import { ComingSoon71, comingsoon71Demo } from "@/components/beste/block/comingsoon71";

export default function Page() {
  return <ComingSoon71 {...comingsoon71Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon71 } from "@/components/beste/block/comingsoon71";

export default function Page() {
  return (
    <ComingSoon71
      label="Refer & Unlock"
      heading="Bring friends, unlock the good stuff."
      description="Every friend who joins on your link moves you toward the next reward."
      currentReferrals={4}
      tiers={[
        { count: 3, reward: "Skip to the front of the line" },
        { count: 10, reward: "A founding-member badge" },
        { count: 25, reward: "Free Pro for a whole year" },
      ]}
      button={{ label: "Share Your Link", href: "/refer" }}
      labels={{ progressCaption: "Your referrals so far", friendsSuffix: "friends" }}
    />
  );
}

Props

type TierItem = {
  count: number;
  reward: string;
};

type ActionLink = {
  label: string;
  href: string;
};

type ComingSoon71Labels = {
  progressCaption?: string;
  friendsSuffix?: string;
};

Behavior notes

• There is no form: the block computes progress from currentReferrals, taking the largest tier.count as the maximum, then clamping currentReferrals / max * 100 between 0 and 100 to size the bar.
• The max tier falls back to 1 when tiers is empty, so the progress math never divides by zero.
• Each tier row compares currentReferrals against its count: unlocked rows draw an accent border with a Check icon, locked rows stay on the card surface with a Lock icon.
• The button renders as a real navigation via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone, so it points at a URL rather than firing a handler, and it renders only when button is present.
• Every region is optional: the eyebrow, heading, description, tier list, and share button each render only when their prop is present.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.