shadcn.io is not affiliated with official shadcn/ui
Legal Strip Footer Block for React Aria
A legal-only footer: a strip of five legal links as cells on shared hairlines, and a band with the wordmark and the legal entity line.
Installation
Overview
A legal footer for React with React Aria, for a site where the law matters more than navigation. A strip of five links (Terms, Privacy, Cookies, Accessibility, Imprint) runs rail to rail as cells on shared hairlines inside a nav labelled Footer; each cell is one link that tints on hover and focus. Under it a band, ruled by Guides, holds the small wordmark and the legal entity line in a small: the company's name, where it is registered, its company number, its registered office and its VAT number. The entity details are invented; replace them with your own. The page ends on the band, so it draws no closing rule. On a phone the strip is two cells across with the last cell full width. It uses plain links and your theme's tokens, with no JavaScript of its own.
FAQ
How do I change the legal links?
Edit the LEGAL array: each entry is a label and an href. The strip is built for five on desktop; for another count change sm:grid-cols-5 to match, and on phones an odd last link spans both columns by itself.
What goes in the entity line?
The details your jurisdiction asks for on a business site: the registered company name, where it is registered, the company number, the registered office and any tax number. The ones in the block are invented. Wrap numbers in bdi, as the block does, so they read correctly in a right-to-left page.
Does this cover what the law requires?
No. It is the layout for the information, not legal advice: what must appear, and where, depends on the country and the kind of business, so check with whoever advises you.
How do screen readers move through it?
The block is a footer, the page's content-info landmark when placed outside main. The five links are a list in a nav named Footer, and the entity line is a small of plain text that is read in order. Every cell is a link with the theme's focus ring drawn inside the cell.