Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Rewards Ladder Footer Block for React

A footer for a meal-kit service with a referral rewards ladder: three rungs (invite 1, 3 and 5) each with its reward, a meter toward the next one and the visitor's code with a Copy button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A footer for React with Base UI that turns word of mouth into a ladder. Behind a split divider, the start half holds the wordmark, one sentence and two link groups in a nav labelled Footer. The end half is the ladder: a title, a meter and "2 of 3 invited" toward the next reward, three rungs drawn with the catalog's Steps (invite 1, 3 and 5, each with its reward; the rung reached shows a check, the others their number) and the visitor's code in a small read-only field with a Copy button. The Copy button really writes the code to the clipboard and tells screen readers it did. The number of invites is example data held in one constant. A legal band closes the page. On a phone the halves stack.

FAQ

How do I change the rungs and the invite count?

Edit RUNGS (how many friends each rung needs, and its reward), INVITED (the friends invited so far) and CODE at the top of the file. The meter, the "2 of 3 invited" line, which rung is the next and the steps' state are all worked out from those. Fetch INVITED and CODE from your account when the footer renders.

What does the Copy button do?

It writes the code to the clipboard, swaps its icon for a check for three seconds and says "Referral code copied" through a polite status. If the browser refuses (a page not served over HTTPS), the icon becomes a cross and the status says it could not copy. The code field is read-only and selects itself when focused, so it can also be copied by hand.

How does the ladder read to a screen reader?

It is a list named Rewards ladder. Each rung reads its title ("Invite 3 friends") and its reward, preceded by where it stands: Reached, Next reward or Locked. The meter is named with an aria-label.

Where do I share an invite link?

This footer is about the ladder and the code. A link to share is a different job; use one of the invite blocks for it, and keep this one's code as the thing a friend types at checkout.

How does it fit on a phone?

The brand and the links come first, then the ladder under a rule, then the legal row. The rungs stack as they do on desktop, and the code field fills the width.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. On a server-rendered site the year is the one in force when the page was rendered.

  • Pro

    Seat Stepper Footer

    Plans and estimates

    A footer for a team learning subscription with a seats stepper from 1 to 50, the monthly total worked out from it, a Renews on the 1st line and a Manage subscription button, beside two link groups.

  • Pro

    Stacked Referral Invite Banner

    Stacked cards

    A referral card for a savings app: a heading, two reward cells (You get, A friend gets) joined by an arrow, and the invite link in a field with a Copy link button.

  • Pro

    Referral Rewards Pricing

    Discounts and offers

    Referral pricing as a copyable invite link over a three-step reward track: friends invited and joined (2 of 3), the free months each step pays (1 month, 3 months, a year) and what's already earned.

  • Pro

    Call To Action Cell Footer

    Calls to action

    A footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.

  • Pro

    Plan Pills Footer

    Plans and estimates

    A footer for an invoicing tool with three plan pills, Free, Pro and Team, that show the chosen plan's price and three inclusions beside a Compare plans link, over two link groups and a legal band.

  • Pro

    Upgrade Meter Footer

    Plans and estimates

    A slim footer for cloud storage with a plan band: the plan name, the space used and free, a thin meter, the share as a number and an Upgrade button, over a row of links and a legal band.

All 100 footer blocks