shadcn.io is not affiliated with official shadcn/ui
Client Certificates Account Block for React
The certificates that sign an account in on a device: ruled rows with the issuer, the end date and days to go, a details row with serial number and fingerprint, Renew, Revoke and an add dialog.
Installation
Overview
Show people which devices hold a key to their account, with this client certificates panel for React with Base UI. A hairline frame with a plus mark on each corner holds three ruled rows, each with the certificate's name, who issued it, the day it ends and what that means today ("Valid until 26 Oct 2026, in 12 days"). Every date, name, serial number and fingerprint is read from the certificate itself inside the page: the three demo certificates are fake, their keys were thrown away, and the fields come from a short walk through their DER bytes and a real SHA-256. Details opens the serial number and fingerprint, each with a Copy Button. Renew works inside 30 days of the end and moves it a year on, and Revoke asks in an Alert Dialog. The header's Shine Button opens a Dialog with a name and a File Upload for a .pem or .crt file, and the new row arrives as Pending. Undo walks back the last change. It's built from Alert Dialog, Dialog, File Upload, Copy Button, Badge, Field, Input, Button, Shine Button and Guides, with a CSS entrance only. For a secure messaging app, a VPN or any service that signs devices in with certificates.
FAQ
How do I show my own certificates?
Replace RAW with your certificates as base64 DER (the body of a PEM file without its header and footer lines) and a name for each. fieldsOf reads the issuer, subject, serial number and both dates, and sha256 works out the fingerprint, so nothing else is typed. Days to go come from AS_OF, never the clock. In your app read the same fields on your server and send them to the page.
Are these real certificates?
No. They are fake certificates made for the demo with a throwaway root: their private keys were discarded when they were made, so they identify nobody and sign nothing. Never put a private key in a page; this block only ever shows public certificates.
Is the fingerprint real?
Yes, it is the real SHA-256 of the certificate's bytes, worked out in the page by a small helper, and it matches what openssl x509 -fingerprint -sha256 prints for the same file. Renew only moves the end date here, so it keeps the same fingerprint; a real renewal issues a new certificate with a new one, and the status line says so.
What happens when I add a certificate?
The dialog takes a device name and a .pem or .crt file and reads only the file's name: nothing is parsed or uploaded. The row arrives as Pending with no end date, and Undo removes it. To make it real, send the file to your server from add, check it there and show the row's fields once it is approved.
What stays local?
Everything: Renew, Revoke, Add and Undo change this page's state and say so in the foot ("Revoked Work laptop in this demo. Nothing was sent."). A reload starts again. Copy really copies the serial number or the fingerprint to the clipboard, and says if the clipboard refuses.
Is it accessible, and how does it look on a phone?
The rows are a real list, state is a word and a glyph (Valid, Ends soon, Expired, Pending, Revoked), and each button names its certificate ("Revoke Work laptop"). Details is a disclosure button, so the opened pane stays out of the tab order while it is shut. Revoke opens an alert dialog with focus on Keep it. Renew rests quietly until it can work and the status line says when it will. On a phone the buttons sit under each row and the foot with Undo stays pinned.
Related
- Pro
Digital Signature Account
VerificationA signature and the key behind it: key facts with a fingerprint and a public key download, a signature pad with a typed route, the signature at three sizes, and a new key that asks first.
- Pro
Passkeys Account
Sign-in methodsAn account's passkeys: a ruled list of what each one is, when it was created and last used, a name you edit in place, a guarded Remove, and a dialog from the header that names a new passkey.
- Pro
Trusted Devices Account
Sessions and devicesAn account's trusted devices as a table of devices against two switches, one to skip the sign-in code and one to skip the password prompt, with a sentence on what each device's choice means and a meter against the limit.
- Pro
Verification Record Account
VerificationWhat an account has proven and when each proof ends: four rows with the method, the day and a derived end date, a due-soon state, one band that takes a six-digit code or a name, and Undo.
- Pro
Recovery Options Account
Sign-in methodsAn account's recovery options: four numbered ways back in, each with its state in words, a masked value, a quiet test and a one-field form to set it up, and a line that counts how many are ready.
- Pro
Identity Wallet Account
VerificationA wallet of verified credentials: three cards in an inset frame, a shop's request for the chosen one with what it would and would not see, an optional extra switch and a Share button.