Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Rewards Ladder Footer Block for Radix UI

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 Radix 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.

All 100 footer blocks