# StatCard

> Stat cards for a dashboard: a muted label, the value in tabular figures, a delta pill toned by meaning with its comparison, an optional trend and a sentence explaining the number, laid out by a group as cards, ruled columns, or link tabs that switch the chart below.

```ts
import { StatCard } from "@sdxc/ui/app";
```

Renders one stat: a grid that sets the label and delta on one line, the value under them,
then the trend and the footer, in that order whatever order the parts are written in. With
`href` the whole card is one link, and `current` marks it as the metric being shown.

## Examples

```tsx
<StatCard>
	<StatCard.Label>{t("stats.uptime")}</StatCard.Label>
	<StatCard.Value>99.98%</StatCard.Value>
	<StatCard.Delta trend="up" comparison={t("stats.vsLastWeek")}>+0.02%</StatCard.Delta>
	<StatCard.Footer>{t("stats.uptimeFooter")}</StatCard.Footer>
</StatCard>
```

```tsx
<StatCard href="?metric=latency" current={metric === "latency"}>…</StatCard>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `href?` | `string` | Makes the whole card a link, such as the metric's chart tab or its detail page. |
| `current?` | `boolean` | Marks a link card as the metric the page shows, through `aria-current="true"`. |
| `children` | `RemixNode` |  |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


### StatCard.Group

Lays stats out by the width of their container: one column, two compact ones from 18rem, two full-size from 28rem, and `columns` from 52rem.

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"cards" \| "ruled" \| "tabs"` |  |
| `columns?` | `number` | Columns at full width; a narrower container shows at most two, compact, then one. |

Also accepts everything in `TagProps<"div">`.


### StatCard.Label

Renders the stat's name in muted 14px text at the start of the first line.

Takes no props of its own.

### StatCard.Value

Renders the number at `--ui-stat-value-size` (30px in a card, 24px in ruled columns, 22px in a compact group), semibold in tabular figures, so values in a row line up and a live update never shifts its width.

Takes no props of its own.

### StatCard.Delta

Renders the change as a pill toned by meaning (success when it moved the good way, danger when the bad way, neutral when flat) with a decorative arrow, then the comparison in muted text.

| Prop | Type | Description |
| --- | --- | --- |
| `trend` | `"up" \| "down" \| "flat"` |  |
| `invert?` | `boolean` | Tones a fall as good and a rise as bad, for numbers such as latency or error rate. |
| `trendLabel?` | `string` | Spoken before the change, since the arrow is decorative ("Increased by"). |
| `comparison?` | `RemixNode` | The period it compares with, set after the pill ("vs last week"). |

Also accepts everything in `TagProps<"span">`.


### StatCard.Chart

Holds a trend under the value, such as a Sparkline, at `--ui-stat-chart-block-size` across the card's full width.

Takes no props of its own.

### StatCard.Footer

Renders the sentence that explains the number ("2 monitors down since 09:14"), muted, under everything else.

Takes no props of its own.

### StatCard.Skeleton

Stands in for a stat while it loads: the same parts on the same lines, each holding a placeholder bar, so the card keeps its height when the real one streams in.

| Prop | Type | Description |
| --- | --- | --- |
| `delta?` | `boolean` | Reserves a delta pill. |
| `chart?` | `boolean` | Reserves the trend slot. |
| `footer?` | `boolean` | Reserves one footer line. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"cards" \| "ruled" \| "tabs"` | How a group sets its stats: `cards` boxes each one, `ruled` sets columns under a 1px rule, and `tabs` joins link cards into one divided strip whose current card underlines. |
| `Trend` | `"up" \| "down" \| "flat"` | Direction the number moved since the comparison period. |