dashboardcn
1

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() {

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/dual-metric-card.json

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%" } },
  ]}
/>