Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Certificate Manager Dashboard Block for Svelte

Seven certificates as numbered dots on a 120-day expiry runway with zones named in words, an auto-renew switch per certificate that marks the ones that will lapse, and a Renew now button that moves a dot out.

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

See which certificates run out before you do, with this certificate manager panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens with the runway: seven certificates as numbered dots on a line of 120 days counted from a fixed day, over four bands named in words (under 14 days, under 30, under 60 and 60 or more). A Switch per certificate sets auto-renew; turning it off draws the dot hollow and the row says "Will lapse on 3 Nov", while a certificate that renews itself says the day. Renew now issues a fresh 90-day certificate in this page and moves its dot out along the line. The table gives each certificate's number, name, issuer and end date, and a polite line says what changed. It is built from Switch, Button and Guides. For TLS consoles and hosting dashboards.

FAQ

How do I fill it with my certificates?

Edit CERTS: each has a domain, an issuer, the ends date and whether auto renew is on. AS_OF is the day the runway starts from, WINDOW is how many days before the end auto-renew runs (30) and LIFE the days a renewed certificate lasts (90).

How is the runway drawn?

Each dot sits at its days to go over 120, in numeric order down the table, alternating between two lanes so close dates do not overlap. The four bands are the same zones as the legend. The drawing is hidden from screen readers; the table carries the same numbers in text, with the days to go under each end date.

What does Will lapse mean?

With auto-renew off nothing renews the certificate, so it simply ends on its end date. The row says so in words and the dot is hollow, so it does not depend on colour. Turning the switch on again changes the line to the day it renews itself.

What stays local, and how do I wire it for real?

Everything. Renew now changes a date in this page and nothing is issued. To make it real, call your certificate authority's or your host's renewal endpoint from the button, store the new end date and let the runway read it.

How does it look on a phone?

The runway stays whole at the width of the screen. The table drops the issuer and the end date columns into the first column's second line, and Renew shortens its visible word while keeping its full name for screen readers.

All 200 dashboard blocks