FundamentosServer Component

Stat

Un KPI: etiqueta, número grande, variación y una línea de contexto.

import { Stat } from "sebs7n-ui/stat"

Ejemplos

KPIs dentro de un Card

Facturado

$ 1.284.000

+12,4 %vs. mes anterior

Cobrado

$ 998.200

+3,1 %77,7 % del total

Vencido

$ 142.900

+8,0 %6 facturas

import { Card, CardContent } from "sebs7n-ui/card"
import { Stat } from "sebs7n-ui/stat"

function Basico() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <Card size="sm">
        <CardContent>
          <Stat label="Facturado" value="$ 1.284.000" delta="+12,4 %" trend="up" hint="vs. mes anterior" />
        </CardContent>
      </Card>
      <Card size="sm">
        <CardContent>
          <Stat label="Cobrado" value="$ 998.200" delta="+3,1 %" trend="up" hint="77,7 % del total" />
        </CardContent>
      </Card>
      <Card size="sm">
        <CardContent>
          <Stat label="Vencido" value="$ 142.900" delta="+8,0 %" trend="down" hint="6 facturas" />
        </CardContent>
      </Card>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Stat

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`label`*	`React.ReactNode`	—
`value`*	`React.ReactNode`	—
`delta`	`React.ReactNode`	—	Variación respecto del período anterior ("+12%").
`hint`	`React.ReactNode`	—	Contexto del número ("vs. mes anterior").
`trend`	`"neutral" \| "up" \| "down"`	`"neutral"`	Color del delta: up = green-900, down = red-900, neutral = gray-900.
`className`	`string`	—

Teclado

—: No es interactivo.

Accesibilidad

La variación se lee junto al número: el trend pinta, no informa. Poné el signo en el texto (+12 %, −3 %).
Sin "use client": sirve en un Server Component.

Reglas de uso

Dentro de un Card, en una grilla de 2 a 4 columnas.
trend="up" no siempre es bueno: en «tickets abiertos», subir es malo. Elegí el color por el significado, no por la flecha.

Relacionados

Card PageHeader