shadcn.io is not affiliated with official shadcn/ui
SSL Certificates Table Block for Solid
A certificate tracker that draws each certificate's days left on a 90-day scale with marks at 30 and 7 days and a status word, with an auto-renew switch per row, sortable Domain and Days left heads, and a count of those due within 30 days.
Installation
Overview
See at a glance which certificates are running out, with this SSL certificates table for Solid with Ark UI. Each row is a certificate from a tracker: domain, issuer and its days left drawn on a 90-day scale, a fill for what remains and marks at 30 and 7 days, with a word beside it (Valid, Renew soon, Expiring, Expired) and the days counted from a fixed 9 Oct. An auto-renew Switch sits in every row and reads Auto when on and Manual when off. The Domain and Days left heads sort, first press, reverse, then the original order, with a polite line, and a Sort by Native Select takes over below the medium breakpoint, where the scale moves under the domain. A strip of three cells counts the certificates that are valid, due within 30 days and expired, and the header says how many expire within 30 days. It's built from Switch, Native Select and Guides. For certificate trackers, license dashboards and any list ordered by a deadline.
FAQ
How is the scale drawn and how do I change it?
It is a muted track with a foreground fill whose width is the days left as a share of 90, capped at the whole track, and two marks at 30 and 7 days that stand out above and below the track. SPAN sets the length and standingOf the thresholds; the words, the strip and the header all read the same function, so they always agree. The bar is decorative: the words beside it carry the numbers.
What does the auto-renew switch do?
It flips between Auto and Manual in this page's state and says so in the polite line; switching to Manual names the days left and tells you to renew by hand. It does not change the days left, since nothing is renewed here. In your app it would save the setting and let your CA client handle the renewal.
How does sorting work?
Days left starts soonest first, Domain starts A to Z; a second press reverses and a third restores the order the certificates were added. Ties fall to the domain name, the active head carries aria-sort, and the polite line says "Sorted by days left, soonest first". Below the medium breakpoint a Sort by select offers every order, Domain and Days left both ways, plus the original order.
Is it accessible?
Each switch is named by its domain ("Auto-renew mail.brackenfell.example"), sort heads are buttons inside th aria-sort, and the standing is a word, never colour. The scale is hidden from assistive technology because the sentence beside it already says the days left.
How does it look on a phone?
The issuer and the scale column go, and the scale with its word appears under the domain name; the switch stays in the last column without its Auto or Manual label. The Sort by select sits in the header.
What stays local, and how do I wire it for real?
The eight certificates, their issuers and the dates are typed samples under a reserved example domain, and the switches are this page's state. To make it real, read certificates from your issuer or a monitor, compute the days from the expiry and the current time on the server, and send the switch to the renewal setting.