# Counter Text

> A number that counts up when it arrives.

Eases out as it nears the target, in the right locale format, with its width reserved. For stats and milestones.

- Family: Typography
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/counter-text/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add counter-text
```

It installs to `components/galactrex/counter-text.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { CounterText } from "@/components/galactrex/counter-text";

<CounterText to={48210} suffix=" downloads" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `to / from` | `number` | `— / 0` | Target and start. |
| `duration` | `number` | `1.8` | Seconds. |
| `locale` | `string` | — | BCP 47 locale. |
| `format` | `Intl.NumberFormatOptions` | — | Number format. |
| `prefix / suffix` | `string` | — | Around the number. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Stat.** With a suffix like " users".

## Accessibility

- The final value is read; counting is aria-hidden.

## Motion

- Writes text per frame with an expo ease.
- Reduced motion: final value.