dashboardcn

Search documentation

Search for a page or component.

Dual Metric Card

PreviousNext

A card with two metrics side by side, each with a value, share badge, meter, and a supporting fact.

Leads overview
5421.43%
New leads
Top sourceLinkedIn
198
Returning leads
Conversion rate12.8%
import { DualMetricCard } from "@/registry/dashboardcn/blocks/dual-metric-card"

export default function DualMetricCardDemo() {

Two metrics side by side in one card, each with a value, a share badge, a meter, and a supporting fact. Use it when two numbers are best read together, like new and returning leads.

Installation

pnpm dlx shadcn@latest add @dashboardcn/dual-metric-card

Also installs card, button, dropdown-menu, tooltip from shadcn/ui if missing.

Usage

import { DualMetricCard } from "@/components/dual-metric-card"

<DualMetricCard
  title="Leads overview"
  options={[
    { value: "month", label: "This month" },
    { value: "quarter", label: "This quarter" },
  ]}
  metrics={[
    { label: "New leads", value: 54, showShare: true, meter: "bar", detail: { label: "Top source", value: "LinkedIn" } },
    { label: "Returning leads", value: 198, meter: "ticks", detail: { label: "Conversion rate", value: "12.8%" } },
  ]}
/>