500
Number Counter Component
An animated counter component that smoothly transitions between number values.
- Smooth animation between value changes
- Configurable duration and easing functions
- Custom formatting options
- Supports various numerical displays like currency and percentages
Installation
The Number Counter component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the Number Counter component in your project.
React TSX
React TSX
Examples
Default Number Counter
0
Custom Formatted Counter
Revenue
0Animated Number Counter Group
Users
0+Revenue
$0Conversion
0%API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
value | number | Required | The target value to count to |
startValue | number | 0 | The initial value to start counting from |
direction | "up" | "down" | "up" | The direction of the animation |
delay | number | 0 | Delay before starting the animation in seconds |
decimalPlaces | number | 0 | Number of decimal places to show |
className | string | - | Additional CSS classes for the component |