Metric
Metric displays a key performance indicator with configurable action area, type layout, trend indicator, and graph visualization.
'use client'; import { Metric } from 'sdaia-ui'; export default function MetricRealWorld() {Installation
npx sdaia-ui@latest add metric
Usage
import { Metric } from "@/components/ui/metric"<Metric action="default" type="compact" trend="badge" />Examples
Compact
A minimal metric card showing a value and label in a compact layout.
'use client'; import { Metric } from 'sdaia-ui'; export default function MetricCompact() {Icon Left
Metric card with an icon displayed to the left of the value.
'use client'; import { Metric } from 'sdaia-ui'; export default function MetricIconLeft() {Icon Top
Metric card with an icon placed above the value.
'use client'; import { Metric } from 'sdaia-ui'; export default function MetricIconTop() {Icon Left + Text
Metric card combining a left icon with a descriptive text label.
'use client'; import { Metric } from 'sdaia-ui'; export default function MetricIconLeftText() {API Reference
MetricProps
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 |