StatCard

Component documentation for StatCard.

Basic Usage

Base card layout without trend/progress enhancement.

Demo loads on client.

Shows trend/compare information by passing the insight object.

Demo loads on client.

Switches to progress layout and supports shuffle updates.

Demo loads on client.

Prop	Type	Default	Description
`value`	`number \| string`	-	DisplayValue
`label`	`string`	-	Description for label.
`iconClass`	`string`	`''`	Icon class (UnoCSS Icones).
`clickable`	`boolean`	`false`	Enables hover/press states.
`insight`	`StatCardInsight`	-	Change indicator object (moves label to top).
`variant`	`StatCardVariant`	`'default'`	Layout variant (`default` \| `progress`).
`progress`	`number`	-	Progress percent (0-100). Passing this enables the progress variant.
`meta`	`string`	-	Bottom meta line for progress variant.

Field	Type	Default	Description
`from`	`number`	-	Baseline value.
`to`	`number`	-	Current value.
`type`	`'percent' \| 'delta'`	`'percent'`	Percent change or absolute delta.
`color`	`'success' \| 'danger' \| 'warning' \| 'info' \| string`	-	Overrides indicator color.
`iconClass`	`string`	-	Custom indicator icon.
`suffix`	`string`	-	Overrides suffix (default `%` for percent).
`precision`	`number`	-	Decimal precision.

Slot	Description
`value`	Custom value area.
`label`	Custom label area.
`meta`	Meta line for progress variant.