shadcn.io is not affiliated with official shadcn/ui
Hairline Cells Link Directory Footer Block for React Aria
A brandless link directory: six groups of five links as cells on shared hairlines, three across by two down, with a legal band under the grid.
Installation
Overview
A link-directory footer for React with React Aria, for a marketplace or catalogue with many places to go. Six groups, each a small heading over five links, sit as cells on shared hairlines inside a nav labelled Footer: three across by two down on desktop, two across by three on a phone. There is no brand block above them; the small wordmark lives in the legal band under the grid, with the copyright and the policy links. The grid starts at the spine's top rule, so the cells and the rails share lines, and the band is ruled from the grid by Guides. The page ends on the band, with no closing rule. It uses plain links and your theme's tokens, with no JavaScript of its own.
FAQ
How do I change the groups?
Edit the GROUPS array: each entry is a title and a list of links. Six groups of five fill the three-by-two grid; for another count keep an even number on phones (two across) or change lg:grid-cols-3 to the columns you want.
How are the hairlines drawn?
The grid has a border coloured background and a one-pixel gap, and each cell paints the page background over it, so the gaps show as lines. The cells never double an edge. The outer edges are the page rails and the spine's top rule, drawn by Guides.
Where is the brand?
In the legal band, small. The directory is the footer's feature, so it takes the width. For a larger brand block use the link-column footer instead.
How do screen readers move through it?
The block is a footer, the page's content-info landmark when placed outside main. The whole grid is one nav named Footer and each group is an h2 over a list, so a reader can jump group by group and hears how many links each holds. The policy links are a list named Legal.