Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Latest Release Footer Block for Vue

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.

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 split footer for Vue with Ark UI that puts the newest release first. The start half holds the wordmark and a sentence, then a raised release panel in a tinted shell: a version badge and when it shipped, the release's title, three change lines each tagged New, Improved or Fixed in an outline badge, and a "View all releases" link. The end half, behind a split divider that runs from the spine's top rule to the end of the page, is the nav labelled Footer in three link groups. A legal band runs under both halves. The release is typed data at the top of the file, and the whole block is a static server component.

FAQ

How do I change the release?

Edit RELEASE (the version, the "Released 4 days ago" line and the title) and CHANGES (a tag of New, Improved or Fixed and one sentence each). Three lines fit the panel; four or five work, and the panel simply grows. The shipped line is plain text on purpose, so it never reads "now" on a page that was rendered last week; write it as a relative phrase or a date.

Why are the tags outline badges?

So the panel stays calm and the tags are readable in every theme: an outline badge on the card needs no tint, and the word carries the meaning. The tags share one width so the sentences start on one line.

How is this different from the release band in the CTA blocks?

It is a panel inside a footer: the latest release is one half of a split, with the link groups in the other half, and it shows what changed, not only that something shipped. Nothing in it asks the reader to do anything but read or follow the link.

How do screen readers move through it?

The block is a footer. The panel opens with a small h2 ("Latest release"), the release title is an h3, and the changes are a list. The three link groups sit in a nav labelled Footer, each under its own h2.

How does it fit on a phone?

The halves stack with a rule between them: the brand and the release panel first, then the link groups two by two, then the legal row.

All 100 footer blocks