Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Vertical Tabs Data Privacy About Block for Radix UI

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.

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 data-privacy block for React with Radix 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. The panels share one cell, so the tallest sets the height and nothing below moves.

What happens on a phone?

The tabs become chips above the table. The third and fourth columns drop under the item's name as two short lines, so there is no sideways scrolling.

Does it work right to left?

Yes. The list, the divider, the table's columns and the chips follow the reading direction, and the row counts are isolated.

All 150 about blocks