Stat Delta
A change-focused stat display with large directional arrow and color-coded indicators. Ideal for quick status checks and performance deltas.
Installation
$ npx shadcn@latest add @orecus/stat-deltaDependencies:
lucide-reactmotion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/use-reduced-motion@orecus/use-animated-number
Component
Compact delta indicators for showing changes.
Revenue Growthvs last period
Bounce Rateimproved!
Conversionno change
Net Profit
Unsubscribes
CTR
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Change value (e.g., '+23.4%', '-$1,200') |
label* | string | — | Label for the change |
direction* | 'up' | 'down' | 'neutral' | — | Direction of change |
description | ReactNode | — | Optional description text |
color | ThemeColor | — | Color override (auto-set by direction if not specified) |
iconSize | 'sm' | 'md' | 'lg' | 'md' | Size of the arrow icon |
animated | boolean | true | Whether to animate text elements on mount |
animateValue | boolean | true | Whether to animate numeric values with a counting effect |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |