shadcn.io is not affiliated with official shadcn/ui
Data Practices Table FAQ Block for Radix UI
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.
Installation
Overview
An FAQ for React with Radix UI. 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.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. If search engines must read every answer, add structured data built from the same QUESTIONS array. 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.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.