Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Two-Tone Split Footer Block for React

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.

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 in two tones that both come from your theme. The brand half is tinted and reaches the viewport's start edge: the wordmark, a two-line promise, a small stack of three drawn prints and, at its foot, the copyright and policy links. The other half is plain and holds three link columns (Shop, Help, Company) behind a divider that runs from the page's top rule to the end of the page with a + where it meets the rule. On a phone the tinted brand block comes first and the columns follow under a rule. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.

FAQ

Why is it called dark-light if it follows the theme?

The slug keeps its old name so existing links keep working. The two halves are two tones of the same theme: the brand half is the muted tint, the link half is the page. Nothing forces a dark scope, so the contrast between the halves holds in light and dark themes.

How does the tint reach the edge of the screen?

A layer behind the brand half extends past the page column to the viewport's start edge (to both edges on a phone, where the block is full width). The footer clips it, so it never causes sideways scrolling, and it flips to the right edge in a right-to-left layout.

What are the three prints?

A small drawing made of plain elements, a card with a mat, a sun and a horizon, hidden from screen readers. Replace it with your own product images, or delete the block, and the half keeps its layout.

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

    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

    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

    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

    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

    Tinted Strip Legal Footer

    Slim and minimal

    A legal-only footer for a code-review tool: one row on a full-width tinted strip, the copyright at the start and three legal links at the end.

All 100 footer blocks