Metric displays a key performance indicator with configurable action area, type layout, trend indicator, and graph visualization.
Loading demo: metric-real-world
npx sdaia-ui@latest add metric
import { Metric } from "@/components/ui/metric"<Metric action="default" type="compact" trend="badge" />A minimal metric card showing a value and label in a compact layout.
Loading demo: metric-compact
Metric card with an icon displayed to the left of the value.
Loading demo: metric-icon-left
Metric card with an icon placed above the value.
Loading demo: metric-icon-top
Metric card combining a left icon with a descriptive text label.
Loading demo: metric-icon-left-text
Props for the Metric component.
Prop | Type | Default | Required |
|---|---|---|---|
action | 'Default' | 'Footer' | 'Header' | 'Default' | optional |
type | 'Compact' | 'Icon Left' | 'Icon Top' | 'Icon Left + Text' | 'Compact' | optional |
trend | 'None' | 'Badge' | 'Text' | 'None' | optional |
graph | 'None' | 'Compact' | 'Large' | 'None' | optional |
chartTrend | 'Positive' | 'Negative' | 'Positive' | optional |
label | string | 'View 24 hours' | optional |
value | string | '2,000' | optional |
trendValue | string | '100%' | optional |
trendLabel | string | 'vs last month' | optional |
actionLabel | string | "View report" | optional |
onAction | () => void | - | optional |
onMoreOptions | () => void | - | optional |