Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

SSL Certificates Dashboard Block for React Aria

Five certificates with time to expiry, and for the picked one its chain as three linked cells, its names as chips, its fingerprint with Copy, an Auto-renew switch and a hostname check that says whether the certificate covers it.

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

Find out whether a certificate covers your hostname with this certificate inventory for React with React Aria. A hairline frame with a plus mark on each corner lists five Certhaven certificates with their issuer and the time left in words, and a radio on each row picks one. The side cell then shows that certificate: its chain drawn as three linked cells (leaf, intermediate and root, each with its validity range), its names as chips, its SHA-256 fingerprint with a Copy Button, an Auto-renew Switch and a Check a hostname Field. Type a.b.shop.example against the wildcard certificate and it says why not: a wildcard stands for exactly one label. The foot's Shine Button renews the picked certificate in the page and moves its expiry. It's built from Field, Input, Switch, Copy Button, Badge, Shine Button and Guides. For certificate inventories and hosting consoles.

FAQ

How do I fill it with my certificates?

Edit CERTIFICATES (a domain, an issuer, the names, the validity dates, the fingerprint and whether it renews itself) and ISSUERS (each issuer's intermediate and root with their dates). Days left are counted against the fixed AS_OF date, never the clock, and the rows, the header counts and the chain are worked out from the data.

How does the hostname check decide?

By exact match, or by a wildcard that stands for exactly one label: *.shop.example covers app.shop.example but not a.b.shop.example (two labels deep) and not shop.example itself (the bare domain). Names are compared in lower case. When nothing matches, the sentence says which of those cases it was.

What does Renew now do?

It moves the picked certificate's validity to 90 days from the as-of date and swaps in a new fingerprint, so the row, the chain and the fingerprint all change, and the status line says nothing was requested. The button then goes quiet for that certificate. In your app, call your certificate authority or ACME client from the handler.

What does Copy copy?

The full SHA-256 fingerprint of the picked certificate, as colon-separated hex, and it announces the result in a polite message. This is a real clipboard write.

What stays local?

Everything but the clipboard: the certificates, chains and fingerprints are typed, Auto-renew and Renew now change only this page, and a reload starts over.

How does it look on a phone?

The certificate list comes first and the picked certificate's chain, names, fingerprint and hostname check stack under it, with the Renew now button pinned to the bottom of the screen.

All 200 dashboard blocks