Referral Rewards Tiers

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon71.tsx instead.

Usage

The file also exports comingsoon71Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon71, comingsoon71Demo } from "@/components/blocks/coming-soon/comingsoon71";

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

Props

Types

export interface RewardTier {
  id: string;
  label: string;
  threshold: number;
  reward: string;
  unlocked: boolean;
}

Behavior notes

• Real interactivity: the Share button calls navigator.clipboard.writeText(referralUrl) and swaps its label/icon to "Copied" (useState), it does not revert back automatically.
• The progress bar percentage, referral count, and each tier's locked/unlocked flag are all static props, nothing computes or animates them.
• Locked tiers get a Lock icon and reduced opacity, unlocked tiers get a Check icon, purely conditional styling from the `unlocked` boolean.