Counter Text

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

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add counter-text

Example

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

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

Installs to components/galactrex/counter-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

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.