Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Network Status Footer Block for Radix UI

A footer for a digital-asset exchange with a strip of three network cells (name, status in words, last block height) over a risk-warning notice card.

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 that shows what an exchange must say about its networks for React with Radix UI. A first band holds the wordmark and one sentence beside two short link groups in a nav labelled Footer. Under it a strip of three cells with overshoot lines and + marks shows each network's name, a status dot with the state written out ("Operational", "Degraded: deposits delayed") and its last block height as typed text. A risk-warning notice card, raised inside a tinted shell, sits under the strip, and a legal band closes the page. The networks, heights and wording are invented example data labelled "not live"; the exchange is fictional and nothing here is a real risk statement, so use the text your regulator requires. It's built from Guides, Status, plain lists and your theme's tokens.

FAQ

How do I change the networks?

Edit the NETWORKS array at the top of the file: each entry has a name, a state (operational or degraded), the words shown beside the dot (note) and a height string. The heights are text, not a counter, so the block needs no server; feed them from your node API if you want them live.

How is a degraded network shown?

Only the exceptional state takes a colour: the warning tone on the dot. The normal state uses the foreground tone, and every state is also written in words, with a visually hidden "Status:" prefix, so nothing depends on colour alone.

Why is the risk warning a card and not a banner?

It is page content that a regulator expects to be visible, not a dismissible banner, so it stays in the footer as an aside named by its heading, in a raised card inside a tinted shell. It takes no action and has no close button.

How does it behave in right-to-left layouts?

The block height is wrapped in a bidirectional isolate with a fixed left-to-right direction, so the digits and separators keep their order. The cells, the shell and the legal band use logical spacing and follow the page direction.

How do screen readers move through it?

The block is a footer. The link groups are one nav labelled Footer, each with an h2. "Network status" is an h2, each network is a list item with an h3, and the notice is an aside labelled by its own heading. The legal links are a labelled list.

All 100 footer blocks