shadcn.io is not affiliated with official shadcn/ui
Domain Tabs Security Practices About Block for React
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.
Installation
Overview
A security-practices block for React with Base 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. 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
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
Vertical Tabs Data Privacy About
Security and platformA 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.
- Pro
Accordion Accessibility Pledge About
Security and platformAn accessibility pledge for a checker product: an accordion of the four principles with a conformance word and how each is met, beside an audit history rail of four audits.
- 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
Severity Ladder SLA About
Support and contactAn incident tool's four severities as bands, each with its response and resolution drawn as bars to scale on one log time axis, a compliance figure and a framed note on credits.
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.