Stat Card

Key metric card with value, label, and trend indicator

SaaSAnalytics

Overview

StatCard displays a single metric in a compact card format, commonly used in dashboards. It supports trend indicators, custom icons, number formatting, loading skeletons, and multiple size/variant options.

Usage

import { StatCard } from "@leanicon/web-builder-library/saas";

<StatCard
  label="Total Revenue"
  value={12345.67}
  formatOptions={{ style: "currency", currency: "USD" }}
  trend={{ value: 12.5, direction: "up" }}
  size="md"
  variant="default"
/>;

Variants

Default

Total Revenue

48.3K

+12.5%vs last month

Updated just now

Dark

Total Revenue

48.3K

+12.5%vs last month

Updated just now

Outlined

Active Users

3,842

+4.2%vs last week

Outlined Dark

Active Users

3,842

+4.2%vs last week

Elevated

Orders

1,294

3.1%vs last month

Elevated Dark

Orders

1,294

3.1%vs last month

Neutral Trend

Conversion Rate

5.2%

0.0%no change

Large

Monthly Recurring Revenue

128.4K

+18.3%vs last month

Small

Churn Rate

2.4%

0.8%vs last month

Loading

Props

Name	Type	Default	Required
`label`	`string`	—	Yes
`value`	`string \| number`	—	Yes
`icon`	`LucideIcon`	—	No
`trend`	`TrendData`	—	No
`formatOptions`	`FormatNumberOptions`	—	No
`isLoading`	`boolean`	—	No
`description`	`string`	—	No
`size`	`enum`	`md`	No
`variant`	`enum`	`default`	No