shadcn.io is not affiliated with official shadcn/ui
Certificate Manager CRUD Block for Vue
A hosting panel's TLS certificates as a two-column grid of hairline cards: request one for up to five names in a dialog, renew it for 90 days, and revoke it only after typing its first name, with an Undo line.
Installation
Overview
Request, renew and revoke the certificates behind your domains, with this certificate manager for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a grid of six certificate cards in a frame of fixed height that scrolls inside itself. Each card shows the first name in bold, the other names as chips, who issued it, how many days remain (worked out from a fixed date, so it never changes between visits) and which services use it. Request certificate opens a Dialog with a Tags Input: up to five names, a wildcard only as the first label such as *.cloverfield.example, each name checked as it is added and refused with its reason. The new card says it was issued and ends in 90 days; Renew moves the end to 90 days from the fixed date. Revoke opens an Alert Dialog that names the services still using the certificate and unlocks only when the first name is typed. A revoked card leaves the grid and the foot offers Undo. Request is the only Shine Button, the frame is ruled by Guides, and an empty grid shows an Empty state without the frame changing height. For hosting dashboards, CDNs and any place certificates are managed.
FAQ
How do I fill it with my certificates?
Edit CERTS. Each has an id, a list of names (the first is the main one), ISO issued and expires dates and the services that use it. The days remaining, the Ends soon word (30 days or fewer) and the Used by line are derived from AS_OF and these fields, so nothing is typed twice and nothing reads the clock.
Which names are accepted?
Host names made of lowercase letters, digits and hyphens with a final label of letters, such as shop.name.example. A wildcard is allowed only as the first label (*.name.example), a name already in the list is refused, and so is a name another certificate covers. At most five names fit on one certificate; the field says why when it refuses, and it keeps what you typed.
Why must I type the name to revoke?
Revoking cuts the services that use the certificate, so the button unlocks only when you type the first name exactly, and the dialog lists those services before you do. The revoked card goes with an Undo in the foot, which brings it back in this demo; a real revocation cannot be undone, so wire Undo to nothing in your app or hide it.
What does Renew do?
It moves the end to 90 days after the fixed date and says so in the polite line, with an Undo. In your app, Renew would call your issuer and update the end date from its answer; here the date is arithmetic on ISO strings.
What stays local, and how do I wire a real issuer?
Nothing is issued, validated or sent: the cards live in React state in this tab and a reload brings the original six back. In your app call your certificate authority from request, renew and revoke, and show a refusal in the same Problem slot the form already has.