Data Display statsdashboarddata

Metric Grid

High-density grid of key performance indicators for dashboards.

Users

12.4k

+12%
Revenue

$48k

+5%
Bounce

24%

-2%

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MetricGrid.astro and paste the following code:

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>

Quick Info

Category
Data Display
Filename
MetricGrid.astro
Dependencies
None — pure Astro + CSS
Tags
statsdashboarddata