Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Data Practices Table FAQ Block for React Aria

A privacy FAQ with a framed table of what a mail service keeps, why and for how long, beside four questions about data requests, with a Download my data link.

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

An FAQ for React with React Aria. A header and four questions about data requests sit at the start in hairline rows, each with a plus in a ring; at the end, behind a split divider, a framed table lists what the service keeps: five rows of "What we collect", "Why" and "Kept for", with an outline "Download my data" link under it. The table scrolls inside its own frame on a phone, where it follows the questions. No date is printed: retention is stated in periods, such as 30 days. It's built from Table, Accordion, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For email, storage and account products that want to say what they keep before anyone asks.

FAQ

How do I change the table and the questions?

Edit PRACTICES at the top of the file: each row has an id and the three columns, collect, why and kept. Keep each cell to a short phrase, and state retention as a period, not a date, so the table never goes stale. QUESTIONS holds the rows on the left. Have the table checked against what your service really does before you publish it.

How does the table behave?

It's our Table, in a framed card whose scroll container is a named region: below about 28 rem of width the table scrolls sideways inside it, and you can focus it and scroll with the arrow keys. The first column names each row and the cells wrap, so nothing is cut off. On React Aria the table is a grid: use the arrow keys to move between cells; the first column is the row header.

Are the closed answers in the page's markup?

Yes. React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match. The table is plain content and is always in the markup.

How does it work with a keyboard and a screen reader?

The table is read by row and column headers, and each question is a button inside its own h3 under the section's h2. Tab moves through the questions, then into the table and on to the link. Tab moves from question to question.

All 100 faq blocks