# CountTo

- Page: <https://kznlabs.github.io/labsUI/components/count-to>

## CountTo (`count-to`, component)

Springs a number up from a start value once it scrolls into view. Prefix, suffix, decimals and locale.

- Install: `npx @kznlabs/labsui add count-to`
- Docs: <https://kznlabs.github.io/labsUI/components/count-to>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<CountTo>`: Springs a number from `from` to `to` once it scrolls into view. Final value stays in the DOM for SEO.
  - `to: number`: Final number.
  - `decimals?: number` = `0`: Digits after the decimal point.
  - `from?: number` = `0`: Starting number.
  - `locale?: string` = `"en-US"`: BCP 47 locale for grouping and decimals.
  - `prefix?: string` = `""`: Text before the number, e.g. "$".
  - `suffix?: string` = `""`: Text after the number, e.g. "%".

### Usage

```tsx
<CountTo to={48290} prefix="$" />
```

### Example: stats.tsx

```tsx
import { CountTo } from "@/components/ui/count-to";
export function Stats() {
  return <CountTo to={99.9} decimals={1} suffix="%" />;
}
```