shadcn.io is not affiliated with official shadcn/ui
Inline Changelog Footer Block for React
A link-grid footer for a support inbox whose fourth column is the changelog: three recent releases as links with a version badge, their age and their title.
Installation
Overview
A link-grid footer for React with Base UI in which the changelog is just another column. A brand band (wordmark and one sentence) opens it. Under it, the nav labelled Footer is one grid of cells that share hairlines: Product, Company and Support as link lists, and a "Latest" column of the three newest releases, each a link with a version badge, how long ago it shipped and its title, ruled from the next by a hairline. A slim legal band ends the page. The releases are typed data at the top of the file. On a phone the cells go two by two, with Support and Latest across the full width.
FAQ
How do I update the Latest column?
Edit LATEST: each release has a version, an age (a relative phrase such as "2 days ago") and a title. Three rows fit the grid beside four-link columns; add a fourth and the column grows past its neighbours. Each row is one link, so point its href at the release's page.
Why are the ages typed instead of computed?
A footer rendered ahead of time would freeze a computed age at build time. A typed phrase is honest about being an example, and you can feed it from your release dates when the page renders (a relative-time formatter on the server, for instance).
How do keyboards and screen readers read the rows?
Each release is a single link, so one Tab stop reads the version, the age and the title together ("v2.8, 2 days ago, Shared drafts"). The column has its own h2, like the link groups beside it, and all four sit in the one nav labelled Footer.
How does the grid fit on a phone?
Product and Company sit side by side, then Support and Latest each take a full-width cell, so the release titles have room to stay on one or two lines. The hairlines between cells are drawn by a one-pixel gap over the border colour, so they stay straight at every width.
Related
- Pro
Latest Release Footer
Content and updatesA 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
Hairline Cells Link Directory Footer
Link gridsA brandless link directory: six groups of five links as cells on shared hairlines, three across by two down, with a legal band under the grid.
- Pro
Link Columns Footer
Link gridsThe 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.
- Pro
Build Info Footer
Trust and complianceA 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.
- Pro
SaaS Link Cells Footer
Link gridsA product footer for a scheduling tool: a lean brand row, three link groups as separate cells whose first link carries a one-line description and a badge, and a legal band.
- Pro
Company Facts Footer
Company and placesA 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.