Social Proof
StatCounter
Numbers that go up are better than numbers that don't.
Animates a number from `from` (default 0) to `target` over `durationMs`. Pass `format` to control display. Or skip the component entirely and use `useCounter()` to drive your own UI.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/stat-counter.json
Examples
Builders count
Join 0 builders.
<StatCounter target={8247} />Currency
$0
<StatCounter target={42_500_000} format={(n) => `$${n.toLocaleString()}`} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| target* | number | - | End value. |
| from | number | 0 | Start value. |
| durationMs | number | 1800 | Total animation length. |
| ease | (t: number) => number | - | Custom easing (default ease-out-cubic). |
| format | (n: number) => string | - | Display format. |