Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Stat Cells Footer Block for React

A footer for an observability tool with four stat cells (events a day, uptime, regions, rating) above the brand and three link groups, with a legal band closing the page.

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 numbers footer for React with Base UI. A row of four stat cells opens it: each cell has overshoot lines and a + mark, with a large figure over its label (events ingested a day, uptime over the trailing year, regions, average rating). Under the cells the wordmark and one sentence sit beside three link groups in a nav labelled Footer, and a legal band closes the page. The cells sit two by two on a phone and four across from lg. The figures are example data, set in bidi isolates so they read the same in right-to-left text. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How do I change the figures?

Edit the STATS array at the top of the file: each entry is a label and a value string, shown as given. The numbers are example data, so replace them with your own and keep the count at four so the row fills from lg. Nothing is calculated, so the block never shows a number you did not type.

How do screen readers read the cells?

The block is a footer element. A visually hidden h2 names the row ("Tracemoor in numbers") and the cells are a list of four, each a one-item description list read as the label and then its value, for example "Regions worldwide: 38". The link groups sit in one nav labelled Footer, each with an h2.

Do the figures work in right-to-left text?

Yes. Each value sits in a bdi, so "99.99%" and "4.9/5" keep their order and their unit when the page flips. The cell lines and the layout follow the writing direction.

How does it fit on a phone?

The cells sit two by two with the figure scaled down so "99.99%" stays on one line at 320 pixels, then the brand, the three link groups (two across, the third full width) and the legal band stack. Nothing scrolls sideways.

Can the figures count up or update?

They are plain text, so they never shift on load. To animate them, swap each value for the catalog's SlidingNumber and keep the unit in a separate span; the cell width then needs a fixed minimum so the label does not move.

  • Pro

    Award Shelf Footer

    Social proof

    A footer for a design-system tool with a shelf of four award cells, each a greyscale laurel drawn around a glyph with the award's name, category and year, above the legal band.

  • Pro

    Review Sources Footer

    Social proof

    A footer for a review-collection tool with three review-site cells, each with a drawn mark, a foreground star rating, the score, the count and a Read reviews link, above the legal band.

  • Pro

    Milestone Rail Footer

    Content and updates

    A footer for an architecture practice with two link groups and a rail of four milestones, horizontal with a dot per year on a desktop and vertical on a phone.

  • Pro

    Customer Result Footer

    Social proof

    A footer for a dock-scheduling tool with one customer result: a big 38% figure beside a before and after bar pair in a framed figure, a Read the story button, and two link groups.

  • Pro

    Link Columns Footer

    Link grids

    The classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.

  • Pro

    Connected KPI Bar Stats

    KPI bands and tiles

    Four headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.

All 100 footer blocks