Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Latest Release Footer Block for React

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 React with Base 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.

  • Pro

    Inline Changelog Footer

    Content and updates

    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.

  • Pro

    Build Info Footer

    Trust and compliance

    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.

  • 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

    Brand Split Footer

    Brand-led

    A brand-first split footer for a design tool: a display wordmark, a tagline and the Shine Button on one half, three link columns and the legal row on the other.

  • Pro

    Mega Footer

    Link grids

    A mega footer for a cloud platform: a brand band, eight link groups with icons in two ruled bands of four on one desktop screen, an accordion on phones, 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