Metric Card

A dashboard stat card displaying a key metric with optional trend indicator and icon. Composes the Card primitive.

Total Revenue

$45,231

from last month

+20.1%

Active Users

2,350

-4.3%

Conversion Rate

3.24%

+1.1%

Orders

1,429

import { MetricCard } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add metric-card

Import

import.tsx

import { MetricCard } from "@aetherstack/patterns"

Usage

metric-card.tsx

import { DollarSign, Users, TrendingUp } from "lucide-react"
import { MetricCard } from "@aetherstack/patterns"

<MetricCard
  label="Total Revenue"
  value="$45,231.89"
  change="+20.1%"
  trend="up"
  sublabel="from last month"
  icon={<DollarSign className="h-5 w-5" />}
/>

<MetricCard
  label="Active Users"
  value="2,350"
  change="-4.3%"
  trend="down"
  icon={<Users className="h-5 w-5" />}
/>

Props

Prop	Type	Default	Description
label*	string	—	Metric name displayed above the value.
value*	string \| number	—	Primary metric value.
change	string	—	Change indicator, e.g. "+20.1%".
trend	"up" \| "down" \| "neutral"	"neutral"	Controls color of the change badge and arrow direction.
icon	ReactNode	—	Icon displayed in the top-right. Recommended: Lucide icon h-5 w-5.
sublabel	string	—	Optional sublabel below the value, e.g. "from last month".
className	string	—	Additional classes on the Card.

* Required