block

Stats Overview Grid

4-column responsive grid of MetricCards with sample platform analytics data.

Installation

npx shadcn@latest add https://optimotive-ui.dev.optimotive-tools.co.uk/registry.json stats-overview-grid

Preview

Source

blocks/stats-overview-grid.tsx

"use client"

import * as React from "react"
import { MetricCard } from "@/registry/components/metric-card"
import { Users, Zap, CheckCircle, Clock } from "lucide-react"

const SAMPLE_STATS = [
  {
    label: "Active Agents",
    value: "12",
    trend: 8,
    description: "vs last week",
    icon: <Users className="w-4 h-4" />,
  },
  {
    label: "Tasks Completed",
    value: "1,284",
    trend: 23,
    description: "vs last week",
    icon: <CheckCircle className="w-4 h-4" />,
  },
  {
    label: "Avg Response Time",
    value: "1.4s",
    trend: -12,
    description: "vs last week",
    icon: <Zap className="w-4 h-4" />,
  },
  {
    label: "Queue Depth",
    value: "7",
    trend: 0,
    description: "stable",
    icon: <Clock className="w-4 h-4" />,
  },
]

export interface StatsOverviewGridProps {
  stats?: typeof SAMPLE_STATS
  columns?: 2 | 4
}

export function StatsOverviewGrid({ stats = SAMPLE_STATS, columns = 4 }: StatsOverviewGridProps) {
  return (
    <div className={`grid gap-4 ${columns === 4 ? "grid-cols-2 lg:grid-cols-4" : "grid-cols-1 sm:grid-cols-2"}`}>
      {stats.map((stat) => (
        <MetricCard key={stat.label} {...stat} />
      ))}
    </div>
  )
}