Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Cookie Consent Footer Block for React Aria

A footer for a writing app whose legal row opens a cookie settings dialog with a switch per category and shows what was saved.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A footer with a persistent way back to the reader's cookie choices for React with React Aria. A brand band, four groups of links (a nav labelled Footer) in columns divided by hairlines, and a legal row with the copyright and the policies at the start and a ghost "Cookie settings" button at the end. The button opens a dialog with one switch per category, Essential (locked on), Analytics and Marketing, a Shine Button "Save choices" and an outline "Reject all". Saving closes the dialog, returns focus to the button and writes the result in the legal row, "Analytics on, Marketing off", beside a status dot, and in a polite live line. It is an entry point, not a banner: the reader opens the dialog, so it may hold focus while it is open, and nothing appears on load. The rails and top rule come from the Guides spine, and the legal row's rule is drawn by Guides, with none under it because a footer ends the page.

FAQ

How do I add a category or change the wording?

Add an entry to CATEGORIES at the top of the file (an id, a title and a description) and a matching key to the Choices type and OFF. Each entry draws one switch row, and the summary in the legal row is built by summary, so extend it with the new name. Essential is written out separately because it can't be turned off.

Where is the choice saved?

Nowhere yet: it lives in the block's state, so a reload starts from "no choice". In save and reject, write the result to the cookie or storage your consent logic reads and load your analytics and marketing scripts only when it says so; start saved from that value so the legal row shows it on load.

Does the dialog trap focus?

Yes, while it is open: it is a modal dialog the reader opened, so Tab stays inside it, Escape closes it and focus returns to the "Cookie settings" button. Nothing opens on load and nothing blocks the page until the button is pressed, which is why this is not a consent banner and takes none of the care a banner would need.

How are the switches named?

Each switch is named by its row's title and described by the sentence under it, so a screen reader reads "Analytics, switch, off, counts which pages are read…". Essential is a switch that is on and disabled, with "Always on" in its description, so it is clear why it can't be changed. Checked switches are foreground-coloured, so the Shine Button stays the one primary control.

What if I close the dialog without saving?

Nothing changes. The switches are a draft that starts from the last saved choice each time the dialog opens, so Escape, the close button or a click outside discards it.

How does it fit on a phone?

The columns run two to a row without their dividers, the legal row stacks and the dialog sticks to the bottom of the screen as a sheet. The result line keeps its height whether or not something is saved, so saving never moves the row.

All 100 footer blocks