Stat Trend

A compact stat card with embedded sparkline chart for visualizing trends over time. Includes optional trend indicator with direction.

Installation

$ npx shadcn@latest add @orecus/stat-trend

Dependencies:

lucide-reactmotion

Registry:

skeleton@orecus/sparkline@orecus/color-utils@orecus/card@orecus/use-reduced-motion

Line sparkline variants with trend indicators.

Revenue

+12.5%

Active Users

+23.1%

Orders Today

-3.2%

Rating

Revenue vs Costs

+12.5%

Revenue

Costs

Traffic Sources

Organic

Paid

Social

Prop	Type	Default	Description
`value`*	`string \| number`	—	Main value to display
`label`*	`string`	—	Label for the stat
`data`*	`number[] \| SparklineSeries[]`	—	Sparkline data points (single array or multi-series objects with name, data, and optional color)
`trend`	`{ value: string; direction: 'up' \| 'down' \| 'neutral'; color?: ThemeColor }`	—	Optional trend indicator
`color`	`ThemeColor`	`'primary'`	Sparkline color
`showFill`	`boolean`	`true`	Show area fill under sparkline
`sparklineWidth`	`number`	`150`	Width of the sparkline in pixels
`sparklineHeight`	`number`	`48`	Height of the sparkline in pixels
`sparklineType`	`'line' \| 'area' \| 'bar'`	—	Sparkline type (line, area, or bar)
`curved`	`boolean`	`false`	Whether to use smooth curves
`animated`	`boolean`	`true`	Whether to animate the sparkline on mount
`animateText`	`boolean`	`true`	Whether to animate text elements (label, value, trend)
`showLegend`	`boolean`	`false`	Show legend below sparkline for multi-series data
`loading`	`boolean`	`false`	Shows skeleton loading state
`cardProps`	`CardProps`	—	Props to pass to the Card wrapper
`className`	`string`	—	Additional CSS classes