Stats Card

Cards & Layout

Animated statistics card with spring-based number counter, trend indicator (up/down), optional icon, prefix/suffix, and scroll-triggered entrance.

Loading preview...

Customize

Value

12450

Label

Prefix

Suffix

Props

Prop	Type	Default	Description
`value`	`number`	`—`	The numeric value displayed with animated counting.
`label`	`string`	`undefined`	Label text shown above the value.
`trend`	`{ value: number; direction: 'up' \| 'down' }`	`undefined`	Trend indicator with percentage and direction.
`icon`	`React.ReactNode`	`undefined`	Optional icon displayed in the top-right corner.
`prefix`	`string`	`undefined`	Text prefix before the number (e.g. '$').
`suffix`	`string`	`undefined`	Text suffix after the number (e.g. '%').
`className`	`string`	`''`	Additional CSS classes.