Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Seat Stepper Footer Block for React

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 Base UI 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 renders an anchor through render, with nativeButton off. 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.

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

  • 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

    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

    Seat Management Billing

    Plan and usage

    Seats on a team plan: members with a role each (viewers are free), a stepper for the seats you pay for, and the monthly and prorated cost worked out before you save.

  • Pro

    Per-Seat Pricing by Seat Type

    Seats and teams

    Seat-type pricing with a stepper for each type: Full, Collaborator and Viewer seats at different prices, a stacked bar of the seat mix, a live monthly total and, on a phone, a sticky total bar.

  • Pro

    Rewards Ladder Footer

    Calls to action

    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.

All 100 footer blocks