Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

TLS Config Dashboard Block for React

Six endpoints graded from their TLS configuration, with a minimum protocol version control that turns older protocols off, switches off the cipher suites only they carried and works the grades out again.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what raising the minimum TLS version does with this TLS audit for React with Base UI. A hairline frame with a plus mark on each corner lists six Cipherlane endpoints, each with a grade from A+ to F, four protocol chips, its issuer, whether it sends HSTS and a line saying what holds the grade back. A Segment Group in the header sets the minimum, 1.0, 1.1, 1.2 or 1.3: the protocols below it read Off, the cipher suites that only those protocols carried switch off with them, and the grades climb. A protocol older than 1.2 still on holds an endpoint to B, no HSTS holds it to A-minus, a weak cipher on holds it to C, and an endpoint with no protocol left gets an F. Each row opens to list its cipher suites with a strength word. It's built from Segment Group, Badge and Guides. For security reviews and TLS migrations.

FAQ

How do I fill it with my endpoints?

Edit ENDPOINTS (a host, an issuer, whether it sends HSTS, the protocol versions it speaks and the cipher suites it offers) and SUITES (each suite's name, its strength and the protocol versions that carry it). The grades, the chips, the counts and the sentences are all worked out from those.

How is a grade worked out?

An endpoint starts at A+ with TLS 1.3 on or A without it. Then three caps apply and the lowest wins: a protocol older than TLS 1.2 still on caps it at B, no HSTS caps it at A-minus, and a weak cipher suite still on caps it at C. With no protocol left at the chosen minimum it fails with an F. The line under each endpoint names the cap that decided.

What does the minimum change?

It turns off every protocol below it on all six endpoints, which turns off any cipher suite that only those protocols carry, and then every grade, count and the status line are worked out again. Nothing is removed from the typed configuration, so lowering the minimum brings it all back.

How do I use it with the keyboard?

The minimum is a group of four choices you can reach with the arrow keys. Each endpoint's Cipher suites is a button that opens and closes its list and says whether it is expanded, and the closed list is hidden from the tab order.

What stays local?

Everything: the configuration is typed and nothing is scanned or changed, and the status line says so. In your app, read the real configuration of each endpoint and keep the grade rules next to your policy.

How does it look on a phone?

Each endpoint is a short card: the host and grade first, the four protocol chips under it, then the reason and the cipher suites button.