Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Promise Chips Footer Block for React

A footer for a privacy-first analytics tool with a wrapping row of four check-marked chips (EU data residency, No ad trackers, Open API, Export anytime) and two 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 footer that makes four promises for React with Base UI. At the start are the wordmark, one sentence and a wrapping row of chips, each with a check mark: EU data residency, No ad trackers, Open API and Export anytime. At the end are two link columns in a nav labelled Footer, and a plain legal row sits under them. The only line is the page's top rule: spacing does the rest. The chips are not buttons, so they add no tab stops. Show only promises you keep. It's built from Guides, the catalog's Badge, plain links and your theme's tokens.

FAQ

How do I change the promises?

Edit the PROMISES array at the top of the file: each entry is one short phrase. Four fit on one line from lg and wrap on a phone; add more and they wrap further. Keep each to three or four words, and make sure it is true.

Are the chips interactive?

No. They are list items in a labelled list ("Our promises"), each with a decorative check mark, so a screen reader reads four items and nothing takes focus. To link a promise to the page that explains it, wrap the phrase in an anchor inside the chip.

How do screen readers move through it?

The block is a footer element, so at the end of the page it is the content-info landmark. The promises are a labelled list; the two link columns sit in one nav labelled Footer, each with an h2; the legal links are a labelled list.

How does it fit on a phone?

The chips wrap under the sentence, then the two link columns sit side by side, then the legal row stacks. Nothing scrolls sideways at 320 pixels.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.

  • Pro

    Trust Centre Tiles Footer

    Trust and compliance

    A footer for a payments checkout whose three tiles (Security, Privacy, Compliance) share hairlines, each with an icon, a quiet Current status, one line and three links.

  • Pro

    Award Shelf Footer

    Social proof

    A footer for a design-system tool with a shelf of four award cells, each a greyscale laurel drawn around a glyph with the award's name, category and year, above the legal band.

  • Pro

    Comparison Table Footer

    Social proof

    A footer for an uptime monitor with a framed mini table, How we compare (four capabilities, Sandbar next to a typical tool, checks and minuses), beside the brand and two link columns.

  • Pro

    One Row Footer

    Slim and minimal

    The smallest footer: one row on the spine with a wordmark and a copyright line at the start and four inline links with a drawn underline at the end.

  • 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

    Table of Contents Footer

    Link grids

    An even two-column footer: the wordmark, description, social icons and legal line behind a divider from a numbered, two-column list of eight links.

All 100 footer blocks