MetricsCard

Display key metrics and KPIs in dashboard cards with six layout variations.

Import


import { MetricsCard } from "@raydenui/ui";

Usage

Basic

Every card needs a label and a value. variation selects the layout.

Preview

Total Solar Sales

$45,823

Jun 12th, 2023Paid


<MetricsCard
  variation="1"
  label="Total Solar Sales"
  value="$45,823"
  secondaryText="Jun 12th, 2023"
  statusBadge={{ label: "Paid", variant: "success" }}
/>

Layout variations

Each variation arranges the same data differently:

Variation	Layout
`"1"`	Horizontal — label, value and CTA on the left; secondary text and status badge on the right
`"2"`	Vertical — icon and label, then value, then badge and description
`"3"`	Vertical reversed — icon and label, then badge and description, then value
`"4"`	Horizontal body with a large tinted icon
`"5"`	Compact horizontal — label, value and description left; badge and CTA right
`"6"`	Centered vertical

Preview

Total Solar Sales

45,823

10%Compared to last month

Active Users12,543Compared to last month

8.2%


<MetricsCard
  variation="2"
  label="Total Solar Sales"
  value="45,823"
  icon="sun"
  trendBadge={{ label: "10%", trend: "up" }}
  description="Compared to last month"
/>
 
<MetricsCard
  variation="5"
  label="Active Users"
  value="12,543"
  trendBadge={{ label: "8.2%", trend: "up" }}
  description="Compared to last month"
/>

With an icon

icon accepts an icon name or a node. It renders in variations 2, 3, 4 and 6.

Preview

Revenue

$12,345

12%Compared to last month


<MetricsCard
  variation="4"
  label="Revenue"
  value="$12,345"
  icon="dollar"
  trendBadge={{ label: "12%", trend: "up" }}
  description="Compared to last month"
/>

Trend direction

trendBadge.trend is "up" or "down" and sets the arrow and colour.

Preview

Active Users

12,543

8.2%Compared to last month

Bounce Rate

32.1%

2.4%Compared to last month


<MetricsCard
  variation="6"
  label="Active Users"
  value="12,543"
  icon="users"
  trendBadge={{ label: "8.2%", trend: "up" }}
  description="Compared to last month"
/>
 
<MetricsCard
  variation="6"
  label="Bounce Rate"
  value="32.1%"
  icon="chart-down"
  trendBadge={{ label: "2.4%", trend: "down" }}
  description="Compared to last month"
/>

With a call to action

Preview


<MetricsCard
  variation="1"
  label="Total Solar Sales"
  value="$45,823"
  secondaryText="Jun 12th, 2023"
  statusBadge={{ label: "Paid", variant: "success" }}
  cta={{ label: "View Transactions", onClick: () => {} }}
/>

Props

Prop	Type	Default	Description
`variation`	`"1" \| "2" \| "3" \| "4" \| "5" \| "6"`	`"1"`	Layout variation
`label`	`string`	—	Metric label (required)
`value`	`string \| number`	—	Metric value (required)
`icon`	`ReactNode \| IconName`	—	Icon (variations 2, 3, 4, 6)
`trendBadge`	`{ label: string; trend?: "up" \| "down" }`	—	Trend badge (variations 2–6)
`statusBadge`	`{ label: string; variant?: "success" \| "error" \| "warning" \| "info" }`	—	Status badge (variation 1)
`description`	`string`	—	Description text
`secondaryText`	`string`	—	Secondary text, shown on the right in variation 1
`cta`	`{ label: string; onClick: () => void; icon?: ReactNode \| IconName }`	—	Call-to-action link
`className`	`string`	—	Additional CSS classes

Accessibility

The label and value are rendered as text content, so screen readers announce both.
trendBadge and statusBadge render their label as text rather than relying on colour alone.
Pass a cta rather than wrapping the card in a click handler, so the action is reachable by keyboard.