Employee Referral Program

Careers23: Employee Referral Program

A centered referral-program section that renders an optional badge, heading, and description above a three-up numbered step grid, followed by a bordered reward card showing a bonus title, supporting copy, and one or more link buttons.

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/careers23?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers23.tsx, plus the badge and button shadcn/ui primitives it uses for the section eyebrow and the reward-card call-to-action links.

Quick start

The installed file exports careers23Demo alongside the block: the exact props behind the preview above. Spread it to get a working referral-program section in one line.

import { Careers23, careers23Demo } from "@/components/beste/block/careers23";

export default function Page() {
  return <Careers23 {...careers23Demo} />;
}

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

import { Careers23 } from "@/components/beste/block/careers23";

export default function Page() {
  return (
    <Careers23
      badge={{ label: "Refer a Friend", variant: "secondary" }}
      heading="Know someone <strong>great?</strong>"
      description="Our best hires come from referrals."
      steps={[
        { title: "Submit a Referral", description: "Share your contact's name and the role." },
        { title: "We Reach Out", description: "Our team connects within 48 hours." },
        { title: "Earn Your Bonus", description: "Paid after their first 90 days." },
      ]}
      rewardTitle="$5,000 referral bonus"
      rewardDescription="For every successful hire through the program."
      buttons={[{ label: "Submit a Referral", href: "/refer" }]}
    />
  );
}

Props

type StepItem = {
  title: string;
  description?: string;
};

Behavior notes

• The header block (badge, heading, description) only renders when at least one of those three props is provided; otherwise the section opens straight into the step grid.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> markup is honored and styled with text-primary; any HTML you pass is rendered as-is.
• Each step's index number is derived from its array position (index + 1), so reordering the steps array renumbers the circular badges automatically.
• The grid is fixed at sm:grid-cols-3 regardless of how many steps you pass, so a count other than three leaves uneven columns or wraps rows.
• The reward card only renders when rewardTitle, rewardDescription, or a non-empty buttons array is present; an empty buttons array suppresses the button row on its own.
• Buttons render as real next/link anchors via asChild, so navigation follows href directly; there is no click callback, and each step's description is optional and simply omitted when absent.