Data Displaystatsdashboarddata

Metric Grid

Dashboard stat card grid with trend badges.

Users

12.4k

+12%

Revenue

$48k

+5%

Bounce

24%

-2%

Usage

Copy and paste this code into your React component:

import { StatsGridDashboard } from 'react-component-kit-ui/data';

<StatsGridDashboard>Content</StatsGridDashboard>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/StatsGridDashboard.tsx + StatsGridDashboard.css:

'use client';

import './StatsGridDashboard.css';

/** StatsGridDashboard — ported from astro-component-kit. */
export interface StatsGridDashboardProps {
}

export function StatsGridDashboard({}: StatsGridDashboardProps) {
  return (
    <>
      <div className="s-grid" data-rk-ea2277="">
        <div className="s-card" data-rk-ea2277=""><span data-rk-ea2277="">Users</span><h3 data-rk-ea2277="">12.4k</h3><small className="up" data-rk-ea2277="">+12%</small></div>
        <div className="s-card" data-rk-ea2277=""><span data-rk-ea2277="">Revenue</span><h3 data-rk-ea2277="">$48k</h3><small className="up" data-rk-ea2277="">+5%</small></div>
        <div className="s-card" data-rk-ea2277=""><span data-rk-ea2277="">Bounce</span><h3 data-rk-ea2277="">24%</h3><small className="down" data-rk-ea2277="">-2%</small></div>
      </div>
    </>
  );
}

export default StatsGridDashboard;

/* StatsGridDashboard — ported from astro-component-kit (data/StatsGridDashboard.astro) */

.s-grid:where([data-rk-ea2277]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.s-card:where([data-rk-ea2277]) { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; border-radius: 12px; }
span:where([data-rk-ea2277]) { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; }
h3:where([data-rk-ea2277]) { font-size: 1.5rem; color: #fff; margin: 0.25rem 0; }
small:where([data-rk-ea2277]) { font-size: 0.7rem; font-weight: 700; }
.up:where([data-rk-ea2277]) { color: #10b981; }
.down:where([data-rk-ea2277]) { color: #ef4444; }

Quick Info

Category: Data Display
Filename: StatsGridDashboard.tsx
Dependencies: None — pure React + CSS
Tags: statsdashboarddata