shadcn.io is not affiliated with official shadcn/ui
Build Info Footer Block for Vue
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.
Installation
Overview
A footer for Vue with Ark 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.