shadcn.io is not affiliated with official shadcn/ui
Link Columns Footer Block for React Aria
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.
Installation
Overview
A multi-column footer for React with React Aria, the one a product site ends on. At the start, a brand column: the wordmark, one sentence about the product and four social links, each with its glyph and the network's name. Behind a split divider, a nav labelled Footer holds four groups of five links (Product, Developers, Company, Support), each a heading over a list, muted until hovered or focused. Across the foot, a legal band carries the copyright under the brand and four policy links under the groups. The rails and the top rule come from the Guides spine, so the footer joins the block above it with one line; the divider runs from that rule to the end of the page like the rails, with a + mark where it crosses each rule. On a phone the brand, the groups two by two and the legal row stack, with a rule between the brand and the links. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.
FAQ
How do I change the links?
Edit the three arrays at the top of the file: GROUPS (each a title and its links), SOCIAL (an icon, a label and an href) and LEGAL. Every link is a plain anchor with href="#": point each at its page, or swap the anchor for your router's link. Four groups of five fit the grid; three or five groups work too, with the column count changed to match.
How do screen readers move through it?
The block is a footer element: placed at the end of the page, outside main, it is the page's content-info landmark. The link groups sit in a nav labelled Footer, each group a small h2 over a list, so a screen reader can jump between groups by heading and hears how many links each one holds. The social links and the policy links are lists named Follow Pintail and Legal. Every link shows the theme's focus ring when reached by keyboard.
Why do the social links show generic icons with names?
The icon set the blocks use has no brand logos, and a row of unlabelled glyphs leaves people guessing where each one goes. Each link shows a neutral glyph and the network's name, which is also its accessible name. To use the networks' own marks, replace the icon in SOCIAL with your brand icons and keep the label.
How does it sit under the rest of the page?
The footer uses the same spine as every block: the page column, the two side rails and one top rule with + marks where it meets them. Placed under any other block, that rule is the only line between the two. The footer keeps its own bottom padding and draws no rule under the legal row, because it is the end of the page.
How does it fit on a phone?
The brand column comes first, then a rule, then the four groups two by two, then the legal row with the copyright above the policy links. From md the groups sit in one row of four, and from lg the brand column moves beside them behind the divider, with the copyright and the policy links side by side under them. Nothing scrolls sideways at 320 pixels.