shadcn.io is not affiliated with official shadcn/ui
Rights by Region Footer Block for React Aria
A footer for an HR platform whose segmented control (EU and UK, United States, Elsewhere) swaps the four privacy-rights links that apply there, with the legal documents in a row under it.
Installation
Overview
A footer that shows privacy rights by region for React with React Aria. Three bands: the wordmark and a sentence, then the rights band, where a segmented control of three regions (EU and UK, United States, Elsewhere) swaps four links ("Manage cookies", "Request my data", "Object to profiling" and the one that applies in that region, such as "Do not sell or share my information"), and then the legal documents. The visitor picks the region; nothing is guessed. Every region's links share one grid cell, so the band keeps its height when they change, and a polite status line says which region is showing. The links and wording are an example, not legal advice. It's built from Segment Group, Guides, plain links and your theme's tokens.
FAQ
How do I change the regions and their links?
Edit the REGIONS array at the top of the file: each region has an id, a label for the segment and four links. Add a region and a fourth segment appears, in array order. Keep four links per region so the cell holds the same height, and write each label the way your counsel words it.
Does it detect where the visitor is?
No. The block holds the region in its own state and starts on the first one. If you do know the visitor's region (from a header, or a consent tool), pass it to useState as the initial value; the control still lets them look at the others.
What do the links do?
They are plain links (href="#"): point "Manage cookies" at your consent tool, and the request links at your data-request form. Nothing here records a choice or removes data, and the wording is not legal advice.
Does the band jump when the region changes?
No. All three lists sit in one grid cell, and the ones not showing are invisible and hidden from assistive technology, so the cell is as tall as the tallest list.
What does a screen reader say when I change region?
The segments are radio buttons in a group named Region, so Tab reaches the group and the arrow keys move between regions. A live line that is empty until the first change says "Showing the rights that apply in the United States" once, politely. The links are a list inside the nav labelled Footer.