Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Region Status Footer Block for Ark UI

A split footer for a webhook-relay API: a subscribe-to-updates popover at the start, a framed figure of three regions with latency and thirty-day bars at the end.

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 status footer for React with Ark UI that shows how the service has behaved. The start half holds the wordmark, one sentence, a "Subscribe to updates" popover (Email, RSS and Webhook rows) and the nav labelled Footer. The end half, behind a split divider that runs from the spine's top rule to the end of the page, is a framed figure of three regions. Each region is a status dot, its name and city, the median latency, a bar of thirty thin cells (one per day, oldest first) and a sentence saying the same in words. A normal day is the foreground tone; the one degraded day takes the warning token. A legal band runs under both halves. The data are typed constants at the top of the file, so nothing fetches.

FAQ

How do I feed it real data?

Edit REGIONS: each region has an id, a city, a p50 in milliseconds and thirty days. history([13]) builds the days and lists, as "days ago", which ones were degraded. Replace that with your own series (any list of { ago, state } objects, oldest first) and the bars, the "today" dot and the sentence under each bar all follow. The block fetches nothing itself.

When do the bars use colour?

Only for the exception. A normal day is the foreground tone, so a month of calm reads as one quiet bar, and a degraded day takes the Status warning token. The sentence under each bar gives the same count in words ("1 degraded day, the last 13 days ago"), and each bar is one image named with that sentence, so nobody has to read thirty cells.

How does the Subscribe popover behave?

It opens on press or Enter and holds three links: Email, RSS and Webhook, each with one line saying what you get. Escape or a press outside closes it. It does not trap focus. The Ark popover is set to non-modal, so the rest of the page stays readable while it is open.

Does it work right to left?

Yes, with one deliberate exception: the thirty-day bar and its "30 days ago" and "Today" ends keep their order in every direction, because a time series reads oldest to newest. Everything else mirrors, and the latency figure is isolated so its digits stay together.

How does it fit on a phone?

The halves stack with a rule between them: the brand, the subscribe button and the links first, then the figure at the full width, then the legal row. The bars shrink with the width (each cell is a flexible slice), so thirty cells still fit at 320 pixels.

All 100 footer blocks