# Service card
> Card for one demo service with ports, exposure, a 60-second request-rate sparkline, consumer and dependency counts, and a restart.
- Element: `<sv-service-card>`
- React: `import { SvServiceCard } from "@/components/lumesec/sv-service-card"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-service-card.json
- Page: https://elements.lumesec.ai/components/service-map/service-card



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

```html
<sv-service-card svc="api-1"></sv-service-card>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/sv-service-card
```

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-service-card.json
```

## Usage

React:

```tsx
import { SvServiceCard } from "@/components/lumesec/sv-service-card";

export function Example() {
  return (
    <SvServiceCard svc="api-1" />
  );
}
```

HTML:

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

<sv-service-card svc="api-1"></sv-service-card>
```

## Behaviour

One service with its ports, exposure, request rate over the last minute, consumers and dependencies.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                                                                                      |
| --------- | ---------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `svc`     | `svc`      | `string` | `api-1` | Service id from the demo inventory, for example `api-1`, `pg`, `redis` or `infer`. Unknown ids fall back to `api-1`. Read once on first connect. |

### Events

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

| Event     | React prop  | Detail                | Description                                         |
| --------- | ----------- | --------------------- | --------------------------------------------------- |
| `restart` | `onRestart` | `{ service: string }` | Fires when a restart finishes, with the service id. |

### Methods

Call them on the element, for example through a React ref.

| Method      | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------ |
| `restart()` | Simulates a restart: the status shows Restarting and the rate drops to zero for 2.2 s, then `restart` fires. |

## Accessibility

* A polite live region announces the restart and when the service is running again.
* The sparkline is `aria-hidden`; the current rate and p95 latency are plain text.
* The Restart button is disabled while the restart runs.
* Reduced motion: the restart finishes after 50 ms instead of 2.2 s. The sparkline still updates every second.

## 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`, `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* Reads the shared demo infrastructure `INFRA`; `svc="api-1"` selects the record. Service ids: `proxy`, `nx-edge`, `api-1`, `admin`, `nx-app1`, `api-2`, `worker`, `nx-app2`, `idp`, `ldap`, `prom`, `grafana`, `loki`, `pgb`, `pg`, `nx-db`, `redis`, `infer`, `s3`.
* Consumers and Depends on count the demo edges into and out of the service. Rate and p95 latency are simulated; a service without inbound edges idles around 5 req/s.