Referral LeaderboardPRO

ComingSoon37: Referral Leaderboard

A pre-launch referral leaderboard built on a single accent color, with a square eyebrow, a heading, a supporting line, and a bordered ranked list of members with avatars and invite counts, one row highlighted as the viewer, above a dark seal 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/comingsoon37?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

The installed file exports comingsoon37Demo alongside the block: the exact props behind the preview above. Spread it to get a working leaderboard in one line.

import { ComingSoon37, comingsoon37Demo } from "@/components/beste/block/comingsoon37";

export default function Page() {
  return <ComingSoon37 {...comingsoon37Demo} />;
}

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

import { ComingSoon37 } from "@/components/beste/block/comingsoon37";

export default function Page() {
  return (
    <ComingSoon37
      label="Referral Leaderboard"
      heading="Climb the list, skip the line."
      description="Every friend who joins on your link moves you up."
      entries={[
        {
          rank: "1",
          name: "Priya Nadar",
          referrals: "128",
          avatar: { src: "/people/priya.jpg", alt: "Leaderboard member" },
        },
        {
          rank: "18",
          name: "You",
          referrals: "12",
          avatar: { src: "/people/you.jpg", alt: "Your place on the leaderboard" },
          isYou: true,
        },
      ]}
      button={{ label: "Share Your Link", href: "/waitlist" }}
      labels={{ referralsSuffix: "invited" }}
    />
  );
}

Props

type LeaderboardEntry = {
  rank: string;
  name: string;
  referrals: string;
  avatar: { src: string; alt: string };
  isYou?: boolean;
};

type ComingSoon37Labels = {
  referralsSuffix?: string;
};

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

Behavior notes

• There is no form or event callback: the button is a real navigation via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone and a Share2 icon, so it always points at a URL.
• The leaderboard renders only when entries is non-empty, mapping each entry into a row inside a single bordered container, with a border-t divider drawn between rows (rendered for every entry except the first).
• Any entry with isYou set gets a bg-muted highlight and an accent-colored rank, so the viewer's own row stands out from the rest.
• Each row shows the rank, a plain <img> avatar, the name, and the referrals count followed by labels.referralsSuffix when set.
• The eyebrow, heading, description, list, and button each render only when their prop is present.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.