shadcn.io is not affiliated with official shadcn/ui
Stat Cells Footer Block for React Aria
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.
Installation
Overview
A numbers footer for React with React Aria. 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.