shadcn.io is not affiliated with official shadcn/ui
Vertical Tabs Data Privacy About Block for React
A data-flow explainer for a backup service: vertical tabs for what we collect, where it lives and your rights, each panel a four-column table, with a ghost link to request your data.
Installation
Overview
A data-privacy block for React with Base UI, written for Stashly, a fictional encrypted-backup service. A start-aligned header carries a ghost link to request your data. Under it a master and detail split: a vertical list of three tabs at the start, What we collect, Where it lives and Your rights, each with how many rows it holds, and at the end the open tab's panel, a title, one sentence and a table. The first two tables read item, why or where, how long and whether you can delete it; the third lists each right, how to use it, how fast we answer and what it costs. Every panel is stacked unseen under the open one, so choosing a tab never moves the page. On a phone the list becomes a row of chips that scrolls sideways, and each table folds its last two columns into the first cell so nothing scrolls. It's built from Tabs, Button and Guides, a native table for the data, CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a trust page or a privacy centre. The tables are example data, not a real privacy policy.
FAQ
How do I change the tables?
TOPICS holds the three tabs. Each has four column heads, a title, a sentence and its rows; a row has an item and three more cells. Add a row and the count in the tab's label follows. The tables are example data, not legal text.
Is it a real table?
Yes, a native table with a caption, column headers and a row header in each row, so a screen reader announces the item before each cell. A table is used on every library on purpose: it needs captions and header scopes that a grid would not give.
What does the Request my data link do?
It is a plain link with a placeholder address. Point it at your export page or a form. Nothing is sent from the block.
How do the tabs work?
They are vertical tabs: Up and Down move between them. Base UI selects a tab when it gets focus. The panels share one cell, so the tallest sets the height and nothing below moves.
Related
- Pro
Domain Tabs Security Practices About
Security and platformSecurity practices for a password manager in four domain tabs, each a list of controls marked Done or Rolling out, under a security score worked out from the controls.
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Scenario Picker Ethical Practices About
Principles and processAn ethics block for a survey tool: three requests as radio cards (hand over customer data, switch off a feature, share usage with an investor), each answered in three numbered steps and a named decider.
- Pro
Rights by Region Footer
Trust and complianceA 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.