Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Upgrade Meter Footer Block for React

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.

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 where the account stands. The first band reads "Starter plan, 8.2 of 10 GB used, 1.8 GB free", draws a thin meter filled in the foreground tone, writes the share as a number (82%) and ends on the Shine Button "Upgrade". Under it, a band holds the wordmark with one sentence and the links in one row, in a nav labelled Footer, and a legal band closes the page. The two numbers are constants at the top of the file; the share, the space free and the meter's accessible name are all worked out from them, so they cannot disagree. On a phone the plan band stacks (text, meter with its number, button) and the links wrap.

FAQ

How do I show real usage?

Set PLAN (its name, limit and used amount, in gigabytes) from your account data when the footer renders. The share, the space free and the meter's label are derived from it. Because the footer is the same on every page, fetch the numbers once per request, not per component.

How does the meter read to a screen reader?

It is a progress bar named "Storage used: 8.2 of 10 GB". The name is an aria-label on the bar. The number beside it is plain text, so the share is never carried by the bar alone.

Why doesn't the meter change colour as it fills?

The footer keeps the primary colour for the one action, so the meter uses the foreground tone at every level. Add your own warning state, a status icon or a line of text, if usage passing a threshold needs more than a number.

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 plans page.

How does it fit on a phone?

The plan name and usage come first, the meter and its number under them, then the button; the brand and links follow, then the legal row. The footer stays under two screens at 320 pixels.

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

    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

    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

    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

    Storage Quota Metric Banner

    Metrics

    A storage-quota banner for a cloud-storage service: a heading and an Upgrade button over a stacked bar split by type, with four legend cells on shared hairlines naming each type and its size.

  • Pro

    Current Plan Billing

    Plan and usage

    The account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.

  • Pro

    Status Bar Footer

    Slim and minimal

    The slimmest live footer for a cloud host: one band with the wordmark and copyright, a status dot and sentence, the p95 response time and three links.

All 100 footer blocks