Count Up⁽⁰⁰⁸⁾

Smooth spring-physics numerical counter that animates from a start value to target value.

Scroll

Requires:motion

Installation

$npx kibo add count-up

1import { CountUp } from "@/components/kibo/count-up/component";
2 
3export default function Example() {
4  return (
5    <CountUp />
6  );
7}

Prop	Type	Default	Description
`to`	`number`	-	Controls the to for the component animation.
`from`	`number`	0	Controls the from for the component animation.
`direction`	`'up' \| 'down'`	'up'	Direction of movement (e.g., 'top', 'bottom', 'left', 'right').
`delay`	`number`	0	Delay in milliseconds before the animation begins or between steps.
`duration`	`number`	2	Duration of the animation in seconds or milliseconds.
`className`	`string`	''	Additional CSS classes for styling and layout.
`startWhen`	`boolean`	true	Controls the start when for the component animation.
`separator`	`string`	''	Controls the separator for the component animation.
`onStart`	`() => void`	-	Controls the on start for the component animation.
`onEnd`	`() => void`	-	Controls the on end for the component animation.