Metric card

Una métrica en un marco de 8px con esquinas concéntricas, y debajo su título y una oración.

Repeat customers

41%

+6 points since July

People come back

Two in five buyers ordered again within 60 days.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/metric-card

Uso

tsx

import { MetricCard, MetricCardBody, MetricCardPanel, MetricCardText, MetricCardTitle } from "@/components/ui/metric-card"

<MetricCard>
  <MetricCardPanel>{/* un Stat o una gráfica */}</MetricCardPanel>
  <MetricCardText>
    <MetricCardTitle>La gente regresa</MetricCardTitle>
    <MetricCardBody>Dos de cada cinco compradores volvieron a pedir en 60 días.</MetricCardBody>
  </MetricCardText>
</MetricCard>

Espacio para respirar con un solo ritmo: marco de 8px, 24px dentro del panel, 16px alrededor del texto.
Esquinas concéntricas: el panel toma los 32px de la tarjeta menos el marco de 8px (usa la utilidad radius-concentric, que se instala con él).
Una métrica por tarjeta; el título dice el hallazgo y el cuerpo da una oración de contexto.

Código

components/ui/metric-card.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// Essential Design MetricCard: a white shell with an 8px frame around a muted
// panel that holds one piece of evidence, then its title and one sentence.
// Breathing room comes from one rhythm: 8px frame, 24px inside the panel,
// 16px around the text. Concentric: the panel takes 32 − 8 = 24px.
function MetricCard({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="metric-card"
      className={cn(
        "grid content-start rounded-outer-lg bg-card p-concentric-2 shadow-float",
        className
      )}
      {...props}
    />
  )
}

function MetricCardPanel({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="metric-card-panel"
      className={cn("rounded-inner bg-muted p-6", className)}
      {...props}
    />
  )
}

function MetricCardText({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="metric-card-text"
      className={cn("grid gap-1 p-4", className)}
      {...props}
    />
  )
}

function MetricCardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return (
    <h3
      data-slot="metric-card-title"
      className={cn("text-heading", className)}
      {...props}
    />
  )
}

function MetricCardBody({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="metric-card-body"
      className={cn("text-body text-pretty text-muted-foreground", className)}
      {...props}
    />
  )
}

export {
  MetricCard,
  MetricCardBody,
  MetricCardPanel,
  MetricCardText,
  MetricCardTitle,
}