Certificates

Certificates by remaining lifetime with what uses them and an auto-renew switch. Those within 21 days of expiry can be renewed.

View as Markdown

<sv-certs>· loading

Tryrenew s3.lumesec.local.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-certs

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/sv-certs.json

Usage

import { SvCerts } from "@/components/lumesec/sv-certs";

export function Example() {
  return (
    <SvCerts />
  );
}

Behaviour

Certificates by remaining lifetime, what uses them and whether they renew on their own.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

changeReact proponChangeDetail{ action: 'auto-renew', cert: string, on: boolean } | { action: 'renew-cert', cert: string }

Fires when auto-renew is toggled or a renewal finishes. cert is the common name, for example s3.lumesec.local.

Accessibility

Certificates are a role="list". Each lifetime bar is role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and a label that states the days left.
Auto-renew controls are role="switch" elements labelled Auto-renew plus the certificate name.
The summary of certificates expiring within 14 days is a polite live region.
Reduced motion: a renewal completes after 50 ms instead of 1.4 s and the pixel burst is skipped.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --destructive, --foreground, --lumesec-warning and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-border, --ui-danger, --ui-fg2, --ui-mono, --ui-muted and --ui-warn.

Notes

Built-in demo data: five certificates from the internal CA (*.lumesec.local, id.lumesec.local, s3.lumesec.local, ldap.auth-01, db-01.lumesec.local). No attribute selects a record.
Lifetime turns red at 7 days or fewer and amber at 21 or fewer. Renew restores the full lifetime.

<sv-routes>

Routessv-routes

<sv-route-tester>

Where does this request go?sv-route-tester

<sv-upstream>

Upstream poolsv-upstream

<sv-middleware>

Middleware chainsv-middleware

Was this page helpful?

Related