# Certificates
> Certificates by remaining lifetime with what uses them and an auto-renew switch. Those within 21 days of expiry can be renewed.
- Element: `<sv-certs>`
- React: `import { SvCerts } from "@/components/lumesec/sv-certs"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-certs.json
- Page: https://elements.lumesec.ai/components/service-map/certs



Live preview: https://elements.lumesec.ai/view/sv-certs

```html
<sv-certs></sv-certs>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-certs
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-certs.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-certs.js"></script>

<sv-certs></sv-certs>
```

## 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.

| Event    | React prop | Detail                                                                                          | Description                                                                                                        |
| -------- | ---------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `change` | `onChange` | `{ 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](/docs/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.