Referral Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(app)/refer/page.tsx
"use client"

import Link from "next/link"
import { ReferralPage } from "@/components/templates/referral-page"

export default function ReferRoute() {
  return (
    <ReferralPage
      linkComponent={Link}
      user={{ name: "Ryan Cooper", email: "ryan@brightlane.co", link: "https://acme.com/r/ryan-cooper", code: "RYAN20" }}
      ctaTone="brand"
      onInvite={async (emails, note) => {
        const response = await fetch("/api/referrals/invite", { method: "POST", body: JSON.stringify({ emails, note }) })
        if (!response.ok) throw new Error("Could not send the invites")
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic follows the layout props: a split hero with the gift cards on the right over a dotted glow; bold: a pill header, a giant stage title on a gradient mesh, rounder panels, step cards, FAQ cards, an image band and a wordmark footer; minimal: a transparent header, a centered stacked hero, no glow or floating chips, outlined flat panels, no gray bands and a simple footer. The *Props overrides still win.

• userdefault "REFERRAL_USER"
  ReferralUser

  The signed-in person: { name, email, link, code }. The link fills the copy field and every share URL, the code shows under it and on the cards.

• referralsdefault "REFERRAL_REFERRALS"
  Referral[]

  The starting list: { id, name?, email, status: "invited" | "signed-up" | "subscribed", date (ISO) }. Invites sent from the page are added on top. Counts drive the earned total and the milestones.

• milestones
  ReferralMilestone[]

  Rewards by subscribed friends: { id, friends, reward, description, icon? }. Defaults to getReferralMilestones(amount), so the first one names your reward.

• leadersdefault "REFERRAL_LEADERS"
  ReferralLeader[]

  This month's top referrers: { id, name, company, friends, earned (USD) }.

• rankdefault 23
  number

  Your place on the leaderboard; past the listed leaders it shows as your own row under them.

• steps
  StepsSectionItem[]

  How it works: { icon?, title, description, meta? }. Defaults to getReferralSteps(friendAmount, amount).

• terms
  string[]

  The short version of the program terms. Defaults to getReferralTerms(amount).

• faq
  FaqItem[]

  { question, answer } pairs about referrals. Defaults to getReferralFaq(friendAmount, amount).

• labelsdefault "DEFAULT_REFERRAL_PAGE_LABELS"
  Partial<ReferralPageLabels>

  Every visible string; the ones with amounts or counts in them are functions.

• hrefsdefault "DEFAULT_REFERRAL_PAGE_HREFS"
  Partial<ReferralPageHrefs>

  { workspace, rewards, invite, terms }: the header button, the in-page anchors and the full terms.

• rewarddefault 20
  number

  What you earn per subscribed friend, in USD: the title, the cards, the earned total and the reward column.

• friendRewarddefault 20
  number

  What your friend gets off their first month, in USD: the title, the friend's card and the email.

• maxInvitesdefault 20
  number

  Emails per send; at the limit the chips field stops taking more.

• defaultFilterdefault "all"
  "all" | "invited" | "signed-up" | "subscribed"

  The referrals filter on load.

• defaultNotedefault ""
  string

  The personal note on load; empty shows the placeholder in the preview.

• showSharedefault true
  boolean

  The share buttons under the invite link.

• showRewardsdefault true
  boolean

  Your rewards: the earned total and the milestone track.

• showInvitedefault true
  boolean

  Invite by email with the email preview.

• showReferralsdefault true
  boolean

  Your referrals list.

• showStepsdefault true
  boolean

  How it works.

• showLeaderboarddefault true
  boolean

  This month's top referrers.

• showTermsdefault true
  boolean

  The short terms card.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing call to action.

• stepsLayoutdefault "horizontal"
  "horizontal" | "cards" | "vertical"

  How it works as a numbered row, numbered tiles or a timeline rail. Applies to the classic design.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• alternatedefault true
  boolean

  Gray bands on every other visible section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents across the page: the hero glow, the cards' sheen, the milestone fills and nodes, leaderboard bars, terms checks and step markers.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Copy link, Send invites, the phone menu's button and the closing band; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the emails and note fields.

• headerdefault true
  boolean

  The marketing header with Open Acme and your avatar; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• stepsProps
  Partial<StepsSectionProps>

  Overrides for the StepsSection.

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• onInvite
  (emails: string[], note: string) => (void | Promise<unknown>)

  Send invites. A promise keeps the button loading and a rejection shows an error with the chips kept. Without it the form waits 900 ms and toasts. Either way the friends then appear in Your referrals as Invited.

• onResend
  (referral: Referral) => (void | Promise<unknown>)

  Resend on an invited friend; a promise keeps it loading. Without it: 900 ms and a toast.

• onShare
  (channel: "email" | "x" | "linkedin" | "whatsapp" | "native") => void

  A share button was pressed; the share URL still opens.

• onCopyLink
  (link: string) => void

  The invite link was copied.

• toastOptionsdefault "{}"
  ToastOptions | false

  Options for the pretend send and resend toasts ({ toasterId, duration... }); false sends none. A Toaster must be mounted to see them.

• animateIndefault true
  boolean

  The hero rises in once, the cards tilt into place and the earned total rolls up on view; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the USD amounts, counters and dates.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every in-site link on the page (next/link in an app). Share links stay plain anchors.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<ReferralPageSlot, string>>

  Classes for header, hero, title, link, share, cards, rewards, milestones, invite, form, preview, referrals, list, steps, leaderboard, terms, faq, cta and footer.

Parts