Metrics | Versa UI

Provides an overview of a particular data type, usually placed on Dashboards.

Metrics Playground

Preview

Code

Time spent

24 hrs

8.25%

vs last month

Controls

Size:

Large

Medium

Small

Chart:

Line

Bar

None

Trend:

Positive

Negative

Card:

Show Icon:

Trend Overview:

Installation

You can add the metrics component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { Metrics } from '@versaui/ui/components/Metrics';
import { ClockIcon } from '@phosphor-icons/react';

<Metrics
  label="Time spent"
  value="24 hrs"
  trendValue="8.25%"
  trendLabel="vs last month"
  icon={<ClockIcon size={24} weight="duotone" />}
/>

Sizes

Three size variants matching Figma specifications:

{/* Large (default) — horizontal layout, large typography */}
<Metrics label="Revenue" value="$12,450" size="large" />

{/* Medium — compact horizontal layout */}
<Metrics label="Revenue" value="$12,450" size="medium" />

{/* Small — vertical stack layout */}
<Metrics label="Revenue" value="$12,450" size="small" />

Chart Types

Embed sparkline charts for at-a-glance trend visualization:

{/* Line chart */}
<Metrics
  label="Revenue"
  value="$12,450"
  chartType="line"
  chartData={data}
/>

{/* Bar chart */}
<Metrics
  label="Revenue"
  value="$12,450"
  chartType="bar"
  chartData={data}
/>

{/* No chart (default) */}
<Metrics label="Revenue" value="$12,450" chartType="none" />

Trend Types

Semantic trend coloring powered by StatusTag:

{/* Positive trend — success tokens */}
<Metrics
  label="Revenue"
  value="$12,450"
  trendType="positive"
  trendValue="8.25%"
/>

{/* Negative trend — error tokens */}
<Metrics
  label="Revenue"
  value="$12,450"
  trendType="negative"
  trendValue="8.25%"
/>

Card vs No Card

Toggle the Material card surface:

{/* With card (default) — elevated material surface */}
<Metrics label="Revenue" value="$12,450" card />

{/* Without card — transparent, no elevation */}
<Metrics label="Revenue" value="$12,450" card={false} />

Custom Icon

Provide any Phosphor icon or custom ReactNode:

import { CurrencyDollarIcon, ChartLineUpIcon } from '@phosphor-icons/react';

<Metrics
  label="Revenue"
  value="$12,450"
  icon={<CurrencyDollarIcon size={24} weight="duotone" />}
/>

<Metrics
  label="Growth"
  value="+23%"
  icon={<ChartLineUpIcon size={24} weight="duotone" />}
/>

Dashboard Grid Example

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Metrics
    label="Revenue"
    value="$12,450"
    chartType="line"
    trendType="positive"
    trendValue="12.5%"
    trendLabel="vs last month"
    chartData={revenueData}
    icon={<CurrencyDollarIcon size={24} weight="duotone" />}
  />
  <Metrics
    label="Users"
    value="1,284"
    chartType="bar"
    trendType="positive"
    trendValue="8.25%"
    trendLabel="vs last month"
    chartData={usersData}
    icon={<UsersIcon size={24} weight="duotone" />}
  />
  <Metrics
    label="Bounce Rate"
    value="32.4%"
    trendType="negative"
    trendValue="4.1%"
    trendLabel="vs last month"
    icon={<ChartLineUpIcon size={24} weight="duotone" />}
  />
</div>

Edge Cases

{/* No trend overview */}
<Metrics label="Total" value="1,000" showTrendOverview={false} />

{/* No icon */}
<Metrics label="Total" value="1,000" showIcon={false} />

{/* Long metric value — truncates with ellipsis */}
<Metrics label="Total Transactions" value="$1,234,567,890.00" />

{/* Empty chart data — chart area hidden */}
<Metrics label="Revenue" value="$0" chartType="line" chartData={[]} />

Accessibility

Semantic structure: Uses proper <p> elements for metric labels and values
Theme adaptive: Automatically adapts colors across all Versa UI themes using semantic tokens
Reduced motion: Sparkline animations disabled when prefers-reduced-motion: reduce is set
Hover transitions: Subtle elevation change on card hover respects motion preferences
StatusTag integration: Trend badge inherits StatusTag's built-in accessibility attributes

Metrics Props

Prop	Type	Default	Description
`label`	`string`	`—`	Required. Metric label/title displayed above the value.
`value`	`string`	`—`	Required. Primary metric value displayed prominently.
`card`	`boolean`	`true`	Whether to render with an elevated Material card surface.
`size`	`'large' \| 'medium' \| 'small'`	`'large'`	Component size variant. Large/medium use horizontal layout; small uses vertical stack.
`chartType`	`'line' \| 'bar' \| 'none'`	`'none'`	Which sparkline chart to render alongside the metric.
`trendType`	`'positive' \| 'negative'`	`'positive'`	Trend direction — controls chart and StatusTag badge coloring.
`showTrendOverview`	`boolean`	`true`	Whether to show the trend overview badge row.
`trendValue`	`string`	`''`	Trend percentage value displayed in the StatusTag (e.g. "8.25%").
`trendLabel`	`string`	`'vs last month'`	Comparison label displayed next to the trend badge.
`showIcon`	`boolean`	`true`	Whether to show the decorative icon.
`icon`	`ReactNode`	`undefined`	Custom icon element for the icon slot. Pass a Phosphor icon or any ReactNode.
`chartData`	`SparklineDataPoint[]`	`undefined`	Data array for the sparkline chart. Required when chartType is not "none".
`className`	`string`	`''`	Additional CSS classes for the root element.

MetricsPro

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page

Metrics
Pro