Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Seat Stepper Footer Block for React Aria

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.

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 React Aria that shows what a team pays. 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 subscription. A stepper sets the number of seats (1 to 50, with minus and plus buttons or typed), the monthly total is worked out from it and written with the catalog's Format Number in one left-to-right span, a line says "Renews on the 1st", and the Shine Button "Manage subscription" is the one action. The stepper only previews the cost: nothing is changed or sent, and the panel says seats are changed under Manage subscription. A legal band closes the page. On a phone the halves stack, the links first.

FAQ

How do I change the price and the seat limits?

Edit SEAT_PRICE, MIN_SEATS, MAX_SEATS and START_SEATS at the top of the file. The total is seats × SEAT_PRICE, and both the visible figure and the status line read it from there.

What happens if I type something that isn't a valid number?

An empty or half-typed field counts as one seat for the total, and a number outside 1 to 50 is held to the nearest limit. When the field loses focus it settles on the clamped number.

How is the new total announced?

A polite status reads "5 seats, $60 a month." after each change. The visible figure is not itself a live region, so a screen reader is not interrupted by every keystroke.

Why is the total written the same way everywhere?

It is formatted as US dollars with no decimals, inside a left-to-right span so the currency sign and digits keep their order in right-to-left pages. The catalog's Format Number on this library formats with the browser's own locale, so a visitor whose locale writes currency differently may see the figure written their way.

How is the button a link on each library?

It is a real link styled as the Shine Button. The button takes an href and renders a link. Point href at your billing page.

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