Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Stacked Bands Footer Block for Radix UI

A footer in three ruled bands: the wordmark, a sentence and the shop's pages; five social links with their names; and the legal row.

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 three-band footer for React with Radix UI, all of it start-aligned. The first band holds the wordmark and one sentence at the start and the shop's four pages, in a nav labelled Footer, at the end. The second lists five social links, each with a glyph and the network's name in text. The third is the legal row: the copyright and the policies. Each band is ruled from the one above by Guides, with a + where the rule meets the rails, and nothing is drawn under the last band because the footer ends the page. On a phone every band stacks. It uses plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How do I add, remove or reorder the bands?

Each band is one div inside the page column. The first holds the brand and PAGES, the second SOCIAL, the third LEGAL. To drop a band, delete its div; the others keep their rule because each draws its own top rule with Guides. Keep the last band without a rule underneath.

Why do the social links show names beside generic icons?

The icon set has no brand logos, and a row of unlabelled glyphs leaves people guessing where each one leads. The text is the accessible name and the visible label. To use the networks' own marks, swap the icon in SOCIAL and keep the label.

Where is the language select?

This footer has none: a language switch is its own block (see the language selector footer). The three bands are the layout, and the footer stays plain links.

How do screen readers move through it?

The block is a footer, the page's content-info landmark when placed outside main. The pages sit in a nav named Footer; the social links and the policy links are lists named Follow Vellichor and Legal, so each is announced with its count.

How does it fit on a phone?

The bands stack in the same order: the brand with its sentence, the pages in a wrapping row, the social links in a wrapping row, then the legal row with the copyright above the policies. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks