Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Company Facts Footer Block for React

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.

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

The "about the company" footer for React with Base UI. The first cell holds the brand, a monogram, the name and one sentence, over a facts list: a definition list of five rows (Founded, Headquarters, People, Customers, Company no.) ruled by hairlines. Beside it are two link columns, Company and Legal, in cells that share hairlines with it, and a slim band under them holds the copyright and three more links. The figures are example data, replace them with yours. It's built from Guides, the catalog's Data List, plain links and your theme's tokens.

FAQ

How do I edit the facts?

Edit the FACTS array at the top of the file: each entry is a label and a value. The rows are a real definition list (dl, dt and dd), so screen readers announce each label with its value. The figures in the block are example data, not real company details.

How do screen readers move through it?

The block is a footer element: placed at the end of the page, outside main, it is the page's content-info landmark. The facts are a definition list under an h2, and each link column is a nav (the first labelled Footer, the second Footer, Legal) with its own h2. Every link shows the theme's focus ring when reached by keyboard.

How does it fit on a phone?

The facts take the full width, then Company and Legal sit side by side under them, then the slim band 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

    Legal Strip Footer

    Slim and minimal

    A legal-only footer: a strip of five legal links as cells on shared hairlines, and a band with the wordmark and the legal entity line.

  • 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

    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

    Regional Offices Footer

    Link grids

    A footer for an enterprise resource planner with five link columns, a band of regional office addresses, and social links on the legal row.

  • Pro

    Raised Panel Dark Footer

    Link grids

    A footer for a spreadsheet-to-app builder that draws its weight from structure: the brand line on the page, four link groups on a raised card inside a tinted shell with a + on each corner, and a legal row.

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

All 100 footer blocks