Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Build Info Footer Block for React

A footer for a docs host with a data list of the running build (version, hash, environment, region, deploy time) and a button that copies it for a bug report.

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 tells you which build you are looking at. Two cells share hairlines. The first holds the wordmark, one sentence and a "This build" data list: version, build hash in code, the environment as a badge, the region, and the weekday and time of the deploy. Under the list a "Copy build info" button puts those same five lines on the clipboard, ready for a bug report. The second cell is the nav labelled Footer, in two link groups. A slim legal band runs under both. The facts are five constants at the top of the file and the copied text is built from them, so the list and the clipboard cannot disagree.

FAQ

How do I show my own build?

Change VERSION, BUILD, ENVIRONMENT, REGION and DEPLOYED at the top of the file. In a real app, fill them from your build step (a commit hash and version from your environment variables, for example) when the page renders. The copied text, BUILD_INFO, is joined from the same constants.

What does the copy button do?

It writes the five lines to the clipboard and swaps its icon for a check for three seconds; a polite status says "Build info copied". If the browser refuses (a page not served over HTTPS, or no permission) the icon becomes a cross and the status says it could not copy.

Why does the deploy time give a weekday and no date?

So the footer never shows a stale date. "Tuesday, 09:41 UTC" is true for a build that is days old and needs no per-day edit; if you want a full date, put it in DEPLOYED.

How is the list marked up?

As a real definition list: each fact is a term and its description, so a screen reader announces "Version, v4.12.1". The environment is an outline badge inside the description, not a colour code.

How does it fit on a phone?

The cells stack, the build facts first, then the links in two columns, then the legal row. The data list's labels and values stay on one line each, wrapping only when a value is long.

  • Pro

    Region Status Footer

    Trust and compliance

    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.

  • Pro

    Company Facts Footer

    Company and places

    A company footer for a construction-software firm: a brand with a facts list (founded, headquarters, people, customers, company number) and two link columns in cells sharing hairlines, then a slim band.

  • 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.

  • Pro

    Latest Release Footer

    Content and updates

    A split footer for a feature-flag service that leads with its latest release: a raised panel with version, title and three tagged changes, beside three link columns.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • 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.

All 100 footer blocks