Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Founders’ Note Footer Block for React

A footer led by a short first-person note from two founders: a heading, three sentences, each founder with an avatar, a drawn signature and a role, and a Reply to us link, beside a divider with 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 seed-stage footer for React with Base UI. At the start, a short letter: a heading ("A note from the two of us") and three first-person sentences, then the two founders each with an avatar of their initials, a drawn signature flourish and their name and role, and a "Reply to us" link that opens a new email. Behind a split divider, the wordmark with one sentence and a single row of links in a nav labelled Footer. The divider runs from the page's top rule to its end, with a + where it meets each rule, and a legal band closes the page. On a phone the note comes first, then the wordmark and the links, ruled between. The founders and the product are made up.

FAQ

How do I change the note?

Edit the heading and the paragraph in the file. Keep it to three sentences: the footer is the last thing on the page, and a short letter gets read where a long one gets skipped.

What are the signature marks?

They are small drawn paths, one per founder, in your text colour at reduced strength, hidden from screen readers because the name and role are written out next to them. Replace the signature path in FOUNDERS, or swap the SVG for an image of a real signature.

What does Reply to us do?

It is a plain mailto: link to an address on a reserved example domain. Point it at your founders' inbox, or at a feedback page.

How is this different from a testimonial footer?

A testimonial footer quotes a customer. This one is written by you, in the first person, and signed, so it works before you have customers to quote.

How does it fit on a phone?

The note comes first, with the founders stacked under it if they do not fit side by side, then a rule, then the wordmark and the row of links. The links wrap onto a second line when needed.

Are Ines, Tomas and Shrike real?

No. The founders, the product and the figures in the note are made up for the example.

  • Pro

    Single Quote Footer

    Social proof

    A footer for a field-service app with one customer quote and its speaker at the start, behind a split divider the brand and two link groups, and a legal band.

  • Pro

    Customer Result Footer

    Social proof

    A footer for a dock-scheduling tool with one customer result: a big 38% figure beside a before and after bar pair in a framed figure, a Read the story button, and two link groups.

  • Pro

    Company Facts Footer

    Company and places

    A company footer for a construction-software firm: a brand with a facts list (founded, headquarters, people, customers, company number) and two link columns in cells sharing hairlines, then a slim band.

  • Pro

    Brand Split Footer

    Brand-led

    A brand-first split footer for a design tool: a display wordmark, a tagline and the Shine Button on one half, three link columns and the legal row on the other.

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

  • Pro

    Milestone Rail Footer

    Content and updates

    A footer for an architecture practice with two link groups and a rail of four milestones, horizontal with a dot per year on a desktop and vertical on a phone.

All 100 footer blocks