1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos statsdashboarddata

Metric Grid

Panel de cuadrícula con tarjetas de estadísticas, valores destacados y porcentajes.

Users

12.4k

+12%
Revenue

$48k

+5%
Bounce

24%

-2%

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { MetricGrid } from 'astro-component-kit';
---

<StatsGridDashboard>Content</StatsGridDashboard>
--- import { MetricGrid } from 'astro-component-kit'; --- <StatsGridDashboard>Content</StatsGridDashboard>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MetricGrid.astro:

astro 
---
---
<div class="s-grid">
  <div class="s-card"><span>Users</span><h3>12.4k</h3><small class="up">+12%</small></div>
  <div class="s-card"><span>Revenue</span><h3>$48k</h3><small class="up">+5%</small></div>
  <div class="s-card"><span>Bounce</span><h3>24%</h3><small class="down">-2%</small></div>
</div>
<style>
  .s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .s-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; border-radius: 12px; }
  span { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; }
  h3 { font-size: 1.5rem; color: #fff; margin: 0.25rem 0; }
  small { font-size: 0.7rem; font-weight: 700; }
  .up { color: #10b981; }
  .down { color: #ef4444; }
</style>
--- --- <div class="s-grid"> <div class="s-card"><span>Users</span><h3>12.4k</h3><small class="up">+12%</small></div> <div class="s-card"><span>Revenue</span><h3>$48k</h3><small class="up">+5%</small></div> <div class="s-card"><span>Bounce</span><h3>24%</h3><small class="down">-2%</small></div> </div> <style> .s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .s-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; border-radius: 12px; } span { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; } h3 { font-size: 1.5rem; color: #fff; margin: 0.25rem 0; } small { font-size: 0.7rem; font-weight: 700; } .up { color: #10b981; } .down { color: #ef4444; } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
MetricGrid.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
statsdashboarddata