Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Brand Split Footer Block for React

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.

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 for React with Base UI that leads with the brand. An even split behind a divider that runs from the page's top rule to the end of the page: the start half is the brand at display size, a mark, the wordmark, a tagline and the page's one main action, a Shine Button reading Start designing; the end half holds three link columns and, at its foot under a rule, the copyright and the policy links. There is no band across both halves. It's built from Guides, the Shine Button, plain links and your theme's tokens.

FAQ

How does the Shine Button work as a link?

It is a link styled as the button, so it navigates like any anchor and keeps the button's light sweep. Each library's own way of rendering a button as a link is already applied in the block, so there is nothing to wire up: change the href and the label.

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 columns sit in a nav labelled Footer, each group a small h2 over a list. The wordmark is a link home, and its mark is decorative. Every link shows the theme's focus ring when reached by keyboard.

How does it fit on a phone?

The brand half comes first with the button, a rule separates it from the groups (three in a row from sm, two by two on the smallest screens), and the legal row stacks at the end. 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

    Two-Tone Split Footer

    Brand-led

    A split footer for a photo-print service: a tinted brand half with the wordmark, a promise, a small stack of drawn prints and the legal line, and a plain half with three link columns behind a divider.

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

  • Pro

    Digest Chooser Newsletter Footer

    Newsletter sign-up

    A newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.

  • 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

    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.

All 100 footer blocks