Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Three Row Footer Block for React Aria

A three-row footer for a leather-goods brand: the brand and four link groups (an accordion on phones), a newsletter band with a real one-line form, and a legal band with the policy links and social icons.

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 three-row footer for React with React Aria, in stacked bands ruled from rail to rail with a + where each rule meets the rails. Row one is the brand and four groups of links in the nav labelled Footer: columns from md, and on a phone an accordion with the first group open. Row two is the newsletter: a title and a line at the start, and at the end an email field with the Shine Button, which checks the address, shows a problem under the field and turns into a confirmation in the same space. Row three is the legal band: the copyright and the policy links, and four social icon links, each named for screen readers and by a tooltip. It's built from Accordion, Field, Input, Tooltip, Guides, Shine Button and Button, with your theme's tokens for every colour.

FAQ

Where does the sign-up go?

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your mailing-list provider: email holds the address.

How is the address checked?

The form has noValidate. On submit, problemWith checks that something was typed and that it has an @ and a domain; the message replaces the helper line under the field, the field gets aria-invalid, and focus stays on it. Typing clears the message.

How does the accordion work on a phone?

Below md the four groups become an accordion, one open at a time, the first open to start; from md they are plain columns. Both are the same links in a nav labelled Footer, and only one is shown at a time, so a screen reader meets one landmark. The groups are disclosures in a group with the first expanded; closed panels are hidden from keyboard and screen readers.

How are the social icons named?

Each icon is a link with a screen-reader-only name and a tooltip that shows the same name on hover and keyboard focus. The glyphs are generic, not brand logos: swap the icon and the href in SOCIAL.

What happens after a valid address?

The form fades out and a status region takes its place at the same height: a check, "You are subscribed", the address and a "Use another address" button. The region takes focus when it appears, and the button brings back an empty form with focus in the field.

How does the rest fit on a phone?

The brand comes first, then the accordion, then the newsletter with its field and button on one row, then the legal band with the copyright, the policy links and the icons. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks