> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapStat

> Renders one labelled number, with an optional change against the previous period.

```ts theme={null}
function TapStat(__namedParameters): ReactElement;
```

Renders one labelled number, with an optional change against the previous
period.

## Parameters

### \_\_namedParameters

[`TapStatProps`](/extensions/reference/frontend-api/Interface.TapStatProps)

## Returns

`ReactElement`

## Remarks

The label is uppercased in `--fg-muted` and the number uses tabular figures, so
a row of stats stays aligned as values change. `delta` is a ratio, not a
percentage: it renders as whole percent with a plus in front when it is above
zero, and is coloured `--tap-danger` below zero and `--tap-accent` at or above
it. Format `value`
yourself with `tap.format.number` or `tap.format.currency`, so it follows the
owner's locale.

## Example

```tsx theme={null}
import { TapStat, useTap } from '@tappify/extension-sdk';

function Installs({ installs, delta }: { installs: number; delta: number }) {
  const tap = useTap();
  return (
    <TapStat
      label="Installs"
      value={tap.format.number(installs)}
      delta={delta}
      hint="Against the previous seven days"
    />
  );
}
```