Atelier UI

Search components…

Search components…

Stat Card

KPI card with a sparkline and a trend badge.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

StatCardProps

Also accepts all props of React.ComponentProps<"div">

PropTypeDefaultDescription
label* requiredstring——
value* requiredstring——
change* requirednumber—Percentage change vs. the previous period, e.g. 12.5 or -3.2
captionstring——
data* requirednumber[]—Sparkline data points, oldest first
invertTrendbooleanfalseWhen true, a negative change is shown as good (e.g. churn, latency)

Install

$ npx shadcn@latest add https://chromotion.dev/r/stat-card.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this