Referral Programme shadcn/tailwind block

About this block

Referral ProgrammePRO

A referral section walking through three numbered steps and the full terms as a hairline table, beside a column that sticks and floats a live credit card on an image tile.

Social56: Referral Programme

A referral section walking through three numbered steps and the full terms as a hairline table, beside a column that sticks and floats a live credit card on an image tile.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/social56.tsx, the money23 credit piece it floats on the tile (installed to components/beste/piece/money23.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

tsx

import { Social56, social56Demo } from "@/components/beste/block/social56";

export default function ReferralPage() {
  return <Social56 {...social56Demo} />;
}

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

tsx

import { Money23 } from "@/components/beste/piece/money23";
import { Social56 } from "@/components/beste/block/social56";

export default function ReferralPage() {
  return (
    <Social56
      badge={{ label: "Refer a practice" }}
      heading="If you send us someone, both of you get a quieter invoice"
      description="No affiliate dashboard and no tiers."
      steps={[
        {
          title: "Send them your link",
          description: "It goes to a page with your practice named on it.",
        },
        {
          title: "We talk to them first",
          description: "If they are not a good fit we say so and nobody is credited.",
        },
      ]}
      media={
        <Money23
          label="Credit for each of you"
          amount="$580"
          period="one month"
          delta="Both accounts"
          rows={[{ label: "Your account", amount: "$580" }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      termsTitle="The whole arrangement"
      terms={[
        { label: "Credit each", value: "One month, capped at $580" },
        { label: "Paid when", value: "Their first clinic goes live" },
      ]}
      button={{ label: "Get your link", href: "/referrals" }}
      note="We do not pay for reviews, and we will not ask you to post about us."
    />
  );
}

Props

Prop	Type	Default	Description
`badge`	`{ label: string }`	–	Eyebrow above the hairline rule, rendered through `Badge23`
`heading`	`string`	–	Section heading in the left column of the header
`description`	`string`	–	Supporting paragraph, right-aligned from `md` up
`steps`	`Step[]`	`[]`	How the referral works, numbered automatically
`media`	`ReactNode`	–	Live asset on the sticky tile, `money23` in the demo
`image`	`{ src: string; alt: string }`	–	Backdrop behind the media tile
`termsTitle`	`string`	–	Heading above the terms table
`terms`	`Term[]`	`[]`	The full arrangement as label and value pairs
`button`	`{ label: string; href: string }`	–	Action in the sticky column
`note`	`string`	–	Policy note under the action
`className`	`string`	–	Extra classes for the outer `section`

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

type TileImage = {
  src: string;
  alt: string;
};

type Step = {
  title: string;
  description: string;
};

type Term = {
  label: string;
  value: string;
};

Behavior notes

Step numbers are computed, not authored: String(index + 1).padStart(2, "0") renumbers automatically when steps are reordered.
The terms table is a real dl in a two-column grid from sm, filling column by column, so an odd number of terms leaves the gap at the end rather than mid-table.
terms is where the whole arrangement goes, including the cap and the expiry. The block is written on the premise that a referral programme with hidden terms is worse than none.
The sticky column is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and sticky has nothing to travel within.
The action group is items-start, so Button21 keeps its intrinsic width with the note underneath at the same left edge.
The terms block carries its own border-t above the heading, which separates the arrangement from the steps rather than reading as a fourth step.
note deliberately states what is not rewarded, which is what keeps the section from reading as a general incentive to promote.

More Social blocks

View all Social

PRO

social60

Linked Referral Rows

PRO

social53

Contributor Wall

PRO

social26

If you send us someone, both of you get a quieter invoice

Send them your link

We talk to them first

Credit lands when they go live

The whole arrangement