SystemDocs

Stat

Componentes para mostrar métricas y estadísticas clave de manera clara y consistente.

Grupo de Estadísticas (StatGroup)

Usuarios Activos
45,231

20.5% respecto al mes anterior

Ingresos Mensuales
$12,450

5.2% respecto al mes anterior

Nuevas Suscripciones
1,234

Sin cambios

Code Snippet 
<StatGroup cols={3}>
  <Stat>
    <StatLabel>Usuarios Activos</StatLabel>
    <StatNumber>45,231</StatNumber>
    <StatHelpText>
      <StatIndicator type="increase" />
      20.5% respecto al mes anterior
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Ingresos Mensuales</StatLabel>
    <StatNumber>$12,450</StatNumber>
    <StatHelpText>
      <StatIndicator type="decrease" />
      5.2% respecto al mes anterior
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Nuevas Suscripciones</StatLabel>
    <StatNumber>1,234</StatNumber>
    <StatHelpText>
      <StatIndicator type="neutral" />
      Sin cambios
    </StatHelpText>
  </Stat>
</StatGroup>

Iconos Personalizados

Tasa de Rebote
42.3%

Empeoró un 2%

Code Snippet 
<Stat>
  <StatLabel>Tasa de Rebote</StatLabel>
  <StatNumber>42.3%</StatNumber>
  <StatHelpText>
    <StatIndicator type="decrease">
      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-rose-500">
        <path d="m21 16-4 4-4-4"/>
        <path d="M17 20V4"/>
        <path d="m3 8 4-4 4 4"/>
        <path d="M7 4v16"/>
      </svg>
    </StatIndicator>
    Empeoró un 2%
  </StatHelpText>
</Stat>