Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Latest Posts Footer Block for React

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.

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 latest-posts footer for React with Base UI, for a product that posts in several places. A header holds the title and a Follow row: three made-up networks, each a name and a follower count. Under it, three cells from rail to rail share their hairlines, one per network, each a single link: a drawn greyscale mark, the network's name, how long ago it posted, the sentence it posted and a "View post" line. Below sit the wordmark and one row of links in a nav labelled Footer, and a legal band closes the page. On a phone the cells become cards you swipe sideways, snapping to each one. The networks, posts and counts are made up, and the block has no JavaScript of its own.

FAQ

How do I change the posts?

Edit the CHANNELS array: each has a name, a drawn glyph, the post sentence, how long ago it was posted and the followers count. The times are typed text, so update them when you refresh the posts or fill them from your scheduler on the server.

Why are the networks made up?

The block names no real platform, so there is no brand to misuse. The marks are neutral drawn paths in your text colour; replace the names and marks with your own networks, and keep a visible name next to every mark.

Are the follower counts live?

No, they are example figures set in the file. Fetch the real counts on the server if you want them live, and format them compactly (12.4K) so the cells keep their width.

How does the swipe row work on a phone?

From md the cells are a three-column grid. Below it the list becomes a horizontally scrolling row with scroll snapping, so each card lands in the middle. It scrolls with touch, the keyboard (each card is a link you can tab to) and the mouse wheel.

How do screen readers move through it?

The title is an h2, the follow links are a list, each post cell is a link with an h3 for the network, and the "View post" line is read with the network's name. The footer links sit in a nav labelled Footer.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale.

  • Pro

    Social Icons Footer

    Slim and minimal

    A two-row footer: a wordmark and tagline beside five social icon buttons with tooltips, and a ruled band with the copyright and the policy 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.

  • Pro

    Blog Footer

    Content and updates

    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.

  • Pro

    Sibling Products Footer

    Products and catalogs

    A footer for a studio with three apps: the brand and a row of links, then four cells sharing hairlines (a shelf title and a linked tile per app, each with a drawn mark), then the legal band.

  • Pro

    Review Sources Footer

    Social proof

    A footer for a review-collection tool with three review-site cells, each with a drawn mark, a foreground star rating, the score, the count and a Read reviews link, above the 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.

All 100 footer blocks