Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Blog Footer Block for React

A blog footer for a data-engineering blog: topic pills with post counts, the two latest posts and an RSS link on one side, two link groups on the other.

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 blog footer for React with Base UI. A split behind a divider that runs from the page's top rule to the end of the page. The start half is the blog itself: the wordmark and one sentence, "Latest posts" with an RSS link and two posts (a title link and a line of meta), and the topics as pill links, each with its post count. The end half holds two link groups in the nav labelled Footer. A legal band runs under both halves, the divider crossing it. The counts are example data. It's built from Badge, Guides, plain links and your theme's tokens, and it is a static component with no state.

FAQ

How do the topic pills work?

Each pill is a link to the topic's page, drawn with the catalog's outline Badge inside the anchor, so hovering tints it and keyboard focus shows the theme's ring around the whole pill. The count is read as part of the link ("Pipelines 24"). Edit the TOPICS array: each entry has a label, a count and an href. The counts in the block are example data.

How do I show the latest posts?

Edit the POSTS array, or build it from your content (your two newest posts) and pass the same shape: a title, an href and a line of meta. Each post is a heading with its title as the link, so a screen reader's heading list shows them.

Where does the RSS link go?

Point the RSS feed link at your feed's URL. It sits on the same row as the "Latest posts" heading, with a generic feed glyph and its name in text.

How does the divider cross the legal band?

Both rows use the same grid, and the end cell of each draws a start-side border, so the divider runs from the top rule through the legal band to the end of the page, with a + where it meets each rule. It follows the reading direction in right-to-left layouts.

How does it fit on a phone?

The blog column comes first, a rule separates it from the groups (two side by side), and the legal row stacks. The pills wrap onto more lines. Nothing scrolls sideways at 320 pixels.

  • Pro

    Open Source Footer

    Social proof

    An open-source footer for a state-management library: link groups, then a project band with a star-count button, a licence badge, contributor avatars and a Good first issues link.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • Pro

    Community Footer

    Content and updates

    A community footer for forum software: a recurring calendar of three rows (cadence, name, kind badge, Join link), a plain row of community channels and a legal band.

  • Pro

    Latest Release Footer

    Content and updates

    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.

  • Pro

    Latest Posts Footer

    Social proof

    A footer showing the latest post from three channels as cells that share their hairlines, each a drawn mark, a time, one sentence and a View post line, with a Follow row of counts, then the wordmark and one row of links.

  • 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