Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Oversized Email Footer Block for React

A footer for a studio built around one huge mailto link, with project-type chips that really add to the link's subject line, then the wordmark, an address and two link groups.

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 studio footer for React with Base UI that ends the page on an email address set as huge type. Four chips above it (Brand, Web, Product, Motion) really work: each one you press is added to the link's subject line, so "Brand and Web project" is what the visitor's mail app opens with, and the line is shown under the address and announced politely. With nothing pressed the subject is "New project". On a phone the address wraps at the at sign and the type scales with the screen. A band below holds the wordmark, the studio's address and two link groups in a nav labelled Footer, and a legal band closes the page.

FAQ

How does the subject line work?

The chips are a multi-select toggle group. The subject is built from the pressed chips in a fixed order (Brand, Web, Product, Motion), joined with commas and "and", then "project". It is URL-encoded into the mailto: link's subject parameter, and the same text shows under the address. Press a chip again to take it back.

Is the change announced to screen readers?

Yes. The subject line under the address is a polite live region, so a screen reader reads the new subject after each press. The chips are real toggle buttons, so their pressed state is announced too.

Why does the address wrap at the at sign?

The address is split with a word-break opportunity after the "@". On a phone the font size follows the screen width, and where the whole address would be too wide it breaks there, never in the middle of the name or the domain. From lg it fits on one line.

What happens in right-to-left layouts?

The link is forced left-to-right, because an email address always reads that way; the surrounding band and the chips follow the page direction.

What if the visitor has no mail app set up?

A mailto: link depends on the visitor's device, so the address stays visible as text they can copy. If you prefer a form, point the link at your contact page and keep the chips to pre-fill it.

Are the studio and the address real?

No. Northfold, its address and its email are made up for the example; replace them with your own.

  • Pro

    Availability Portfolio Footer

    Brand-led

    A centred one-person footer for a freelance designer: an avatar with initials, the name, a one-line bio, an availability line with a status dot, four social links with names and a row with the nav and the copyright.

  • Pro

    Contact Form Footer

    Company and places

    A contact-form footer for a hosting company: three short link groups on one half of a split, and on the other a compact message form in a card in card that checks itself and confirms in place.

  • Pro

    Giant Wordmark Footer

    Brand-led

    A wordmark-led footer for an outerwear label: a short mission statement, one row of links, a legal band, and the brand name set at giant size, cut off at the foot and faded out by a mask.

  • Pro

    Contact Details Footer

    Company and places

    A contact-details footer for an accounting firm: the brand and two link groups on shared hairlines, and four contact points as cells in a definition list, each with an icon: email, phone, postal address and reply time.

  • Pro

    Call To Action Cell Footer

    Calls to action

    A footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.

  • 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.

All 100 footer blocks