shadcn.io is not affiliated with official shadcn/ui
Sibling Products Footer Block for Solid
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.
Installation
Overview
A sibling-products footer for Solid with Ark 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.
Is the whole tile a link?
Yes. Each tile is one anchor holding the mark, the name and the line, so the whole cell is the target and a screen reader reads the app's name and line as the link's text. The tile tints on hover and shows the theme's focus ring inside its edge when reached by keyboard.
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.