Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sibling Products Footer Block for Radix UI

A footer for a studio with three apps: the brand and a row of links, then four cells sharing hairlines (a shelf title and a linked tile per app, each with a drawn mark), then the legal 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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A sibling-products footer for React with Radix UI. The wordmark and one sentence sit beside a single row of links in a nav labelled Footer. Under them a band of four cells, from rail to rail and sharing their hairlines, shows the shelf: one cell titles it ("Also from Stanmore") and each of the others is an app, with a drawn greyscale mark, its name and one line, the whole tile a link. The band ends on the legal band's top rule. The cells stack on a phone, sit two by two from sm and four across from lg. The three apps are made up. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How do I change the apps?

Edit the APPS array at the top of the file: each entry is a name, a one-line description and a glyph, a stroked path in a 24 by 24 box drawn in the tile. Point each tile's link (href="#") at the app's page. Three apps plus the title cell fill four columns from lg; with a different count change lg:grid-cols-4 to match.

How do screen readers move through it?

The block is a footer element. The links sit in one nav labelled Footer (with a hidden h2). The shelf has an h2 ("Also from Stanmore") and each app is a link containing an h3 with its name. The mark and the arrow are hidden from assistive technology.

Are the marks real app icons?

No. They are three small generic drawings, tally strokes, a page and broadcast arcs, in the foreground tone on a muted tile. Replace the glyph paths with your own, or put an image in the tile.

How does it fit on a phone?

The brand and the link row stack, wrapping onto a second line if needed, then the four cells stack one above another, then the legal band. Nothing scrolls sideways at 320 pixels.