shadcn.io is not affiliated with official shadcn/ui
Centered Plumb Line Footer Block for React Aria
A centred footer in three tiers: a hairline hanging from the top rule to a round wordmark mark, a row of six links, and the copyright line.
Installation
Overview
A centred footer for React with React Aria, for a shop or a studio with a short list of pages. A hairline hangs from the spine's top rule down to the round wordmark mark, like a plumb line. Under it come three tiers on one centre axis: the name and one line about the business, a nav labelled Footer with six links in a wrapping row, and the copyright line. There are no bands: the top rule, the rails and the hanging line are the only lines. It ends the page, so it keeps its bottom padding and draws no closing rule. On a phone the links wrap into centred rows. It is built from plain links and your theme's tokens, with no JavaScript of its own.
FAQ
How do I change the links?
Edit the LINKS array: each entry is a label and an href, and the row wraps by itself, so five to eight links work. Each link is a plain anchor with href="#": point it at the page or swap in your router's link.
What is the line from the top rule?
A short vertical hairline, hidden from assistive technology, that starts at the spine's top rule and ends at the wordmark mark, so the footer reads as hung from the page's line. Remove the span above the wordmark if you want the mark to start lower; the footer keeps working without it.
How do screen readers move through it?
The block is a footer element, so placed outside main it is the page's content-info landmark. The links sit in a nav named Footer as a list. The wordmark is a link home; its coffee glyph is decorative and hidden.