Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Domain Tabs Security Practices About Block for Radix UI

Security 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.

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 security-practices block for React with Radix UI, written for Lockhaven, a fictional password manager. A start-aligned header carries the security score at its end, "92 / 100" over a bar. Under it a band of four tabs, Data, Access, Infrastructure and People, scrolls sideways on a phone, and each tab says how many of its five controls are done. A panel is five ruled rows: the control, what it does in a sentence and its state, a filled dot and "Done" with since when, or a hollow dot and "Rolling out" with when it will be done. Every panel is stacked unseen under the open one, so choosing a tab never moves the page. The score is not typed: each control is worth five points, one still rolling out earns three, and the figure and the bar are worked out from the rows. It's built from Tabs, Status, Progress and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a trust page or a security review. The controls and the score are example data, not a real security claim.

FAQ

How do I change the controls?

DOMAINS holds the four tabs, each with five controls: a name, one sentence, whether it is done and a short "when". Add or remove controls and the tab counts, the score and the bar follow. The controls here are example data.

How is the score worked out?

Every control is worth POINTS (5) and a control still rolling out earns PART_POINTS (3); the score is the points earned over the points possible, rounded. With sixteen done and four rolling out it comes to 92. The scoring rule is printed under the figure so the number is never a mystery.

How is Done told from Rolling out without colour?

A filled dot is done and a hollow ring is rolling out, and the word is always written next to it, with when. The dot is decoration.

How do the tabs behave?

They are real tabs: arrow keys move between them and each one controls its own panel. Arrow keys move focus and the selected tab. The panels share one cell, so the tallest sets the height and nothing below moves.

What happens on a phone?

The tab band scrolls sideways, each tab keeping its two lines, and the rows stack the state under the control's text.

Does it work right to left?

Yes. The score figure is isolated so it keeps its order, and the tabs, dots and rows follow the reading direction.

All 150 about blocks