Stat Card

A versatile statistics card with icon, title, main/secondary stats, metrics grid, and extensible footer slot. Includes loading skeleton states and compound components for custom layouts.

Installation

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

Dependencies:

lucide-reactmotion

Registry:

skeleton@orecus/color-utils@orecus/card@orecus/header@orecus/use-reduced-motion@orecus/use-animated-number@orecus/animation

Component

Full-featured stat cards with metrics, secondary stats, and animations.

With metrics grid

Revenue Overview

Monthly performance metrics

Total Revenue

vs Last Month

Customers

Growth

Orders

With accent styling

Analytics

Page Views

This Week

With footer

Sales Dashboard

Premium glass card with glow

Total Orders

Uptime

Rating

Footer content (e.g., sparkline chart)

Inverted style

Conversion Rate

Last 30 days performance

Conversion Rate

Props

Prop	Type	Default	Description
`title`*	`string`	—	Title text for the card header
`icon`*	`LucideIcon`	—	Icon component to display in the header
`description`	`ReactNode`	—	Description text below the title
`mainStat`*	`StatValue`	—	Main statistic with value, label, and optional color
`secondaryStat`	`StatValue`	—	Optional secondary statistic displayed on the right
`metrics`	`StatMetric[]`	—	Array of metrics with icon, value, label, and color
`metricsColumns`	`number`	`3`	Number of columns for the metrics grid (1-4)
`action`	`ReactNode`	—	Optional action content in the header (e.g., button)
`footer`	`ReactNode`	—	Optional footer content (e.g., sparkline, progress bar)
`cardProps`	`CardProps`	—	Props to pass to the Card wrapper (type, hoverEffect, accentColor, etc.)
`animated`	`boolean`	`true`	Whether to animate elements on mount
`animateValue`	`boolean`	`true`	Whether to animate numeric values with a counting effect
`compact`	`boolean`	`false`	Compact layout variant
`loading`	`boolean`	`false`	Shows skeleton loading state when true
`className`	`string`	—	Additional CSS classes for the card