shadcn.io is not affiliated with official shadcn/ui
Inline Changelog Footer Block for Vue
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 Vue with Ark 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.