DocsData & ChartsStat Card

Stat Card

Data

Key metric display card with auto-formatted values, sparkline charts, change indicators, and optional icons.

Import

import { FqStatCard } from '@/components/harlowui/data/fq-charts'

Formats

Supports currency, number, percent, and text formats with automatic formatting.

Total Revenue

+12.4%

$2,400,000.00

vs last month

Active Users

+8.2%

84K

vs last month

Fraud Rate

-15.3%

0.0%

vs last month

Uptime

99.98%

Balance

+4.2%

$31,600.00

vs last month

Transactions

-2.1%

1.3K

vs last month

Success Rate

+0.3%

1.0%

vs last month

Prop	Type	Default	Description
`title`*	`string`	-	Metric label
`value`*	`number \| string`	-	Metric value
`format`	`"currency" \| "number" \| "percent" \| "text"`	`"currency"`	Value formatting mode
`change`	`number`	-	Percentage change indicator (positive = green, negative = red)
`changeLabel`	`string`	-	Label for the change indicator
`icon`	`LucideIcon`	-	Icon component to display
`sparklineData`	`number[]`	-	Data points for the sparkline chart
`currency`	`string`	`"USD"`	Currency code for currency format