# Stat tile
> Stat tile whose number counts up over a shimmer of dots; hovering the sparkline shows the value under the pointer.
- Element: `<hf-stat>`
- React: `import { HfStat } from "@/components/lumesec/hf-stat"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-stat.json
- Page: https://elements.lumesec.ai/components/pixel-hd/stat



Live preview: https://elements.lumesec.ai/view/hf-stat

```html
<hf-stat label="Messages this month" value="48210" delta="+12.4%"></hf-stat>
```

## 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/hf-stat
```

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/hf-stat.json
```

## Usage

React:

```tsx
import { HfStat } from "@/components/lumesec/hf-stat";

export function Example() {
  return (
    <HfStat label="Messages this month" value={48210} delta="+12.4%" />
  );
}
```

HTML:

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

<hf-stat label="Messages this month" value="48210" delta="+12.4%"></hf-stat>
```

## Behaviour

The number counts up over a shimmer of dots; hovering the sparkline swaps it for the value under the pointer.

## API reference

### Attributes

| Attribute  | React prop | Type     | Default               | Description                                                                                                     |
| ---------- | ---------- | -------- | --------------------- | --------------------------------------------------------------------------------------------------------------- |
| `value`    | `value`    | `number` | `48210`               | Displayed value. Observed: a change counts up from the number currently shown.                                  |
| `decimals` | `decimals` | `number` | `0`                   | Decimal places. With 0 the number uses en-US thousands separators.                                              |
| `prefix`   | `prefix`   | `string` | —                     | Text before the number.                                                                                         |
| `suffix`   | `suffix`   | `string` | —                     | Text after the number.                                                                                          |
| `label`    | `label`    | `string` | `Messages this month` | Caption above the number, set once on connect; the live region re-reads it on each value change.                |
| `delta`    | `delta`    | `string` | `+12.4%`              | Badge text. Green, or red when it starts with `-` or `−`. An empty value hides it. Read once on connect.        |
| `data`     | `data`     | `string` | —                     | Comma-separated sparkline values. Needs at least three numbers; otherwise a generated 24-point series is shown. |

### Properties

| Property             | Type       | Description                                                  |
| -------------------- | ---------- | ------------------------------------------------------------ |
| `value`              | `number`   | Setting it writes the attribute and counts to the new value. |
| `series` (read-only) | `number[]` | Sparkline values, from `data` or the generated series.       |

## Accessibility

* The number is text in the monospace font with tabular figures. It changes on every frame while counting, so it is `aria-hidden`, as is the sparkline canvas; the live region below carries the value.
* A visually hidden `aria-live="polite"` region holds the label and final formatted value, for example `Messages this month: 48,210`, updated on each change.
* Sparkline hover values are pointer-only.
* Reduced motion: the number and sparkline appear at once without counting or the shimmer behind the number.

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

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

## Notes

* Hovering the sparkline shows the raw series value rounded to one decimal, without `prefix` or `suffix`.