Block Component

Dashboard Stats

Premium dashboard stat metrics, trends indicators, and visual target/progress limits with a heavy neo-brutalist theme.

Preview

Overview Performance

Real-time telemetry and operational growth metrics.

Last 30 Days

Export PDF

Monthly Recurring Revenue

Total subscription earnings

$24,890

+14.2%

TARGET LIMIT78%

Active Subscribers

Subscribed active users

1,429

+8.3%

TARGET LIMIT62%

API Request Load

Requests in the last 24h

4.8M

-2.1%

TARGET LIMIT45%

INSIGHTOperational status is outstanding. Request volume is running 12% below cluster threshold limit.

Installation

pnpm dlx brutx@latest add dashboard-stats

Usage

import { DashboardStats } from "@/components/ui/dashboard-stats"
import { TrendingUp, Award, Activity } from "lucide-react"

<DashboardStats />

const myStats = [
  {
    title: "Page Performance",
    value: "99/100",
    description: "Lighthouse core web vitals",
    change: "+4.5%",
    trend: "up" as const,
    icon: TrendingUp,
    accentColor: "#FFE66D",
    progress: 99
  },
  {
    title: "Server Health",
    value: "99.98%",
    description: "Average weekly uptime",
    change: "+0.02%",
    trend: "up" as const,
    icon: Activity,
    accentColor: "#4ECDC4",
    progress: 100
  }
];

<DashboardStats
  stats={myStats}
  title="Real-Time Health Status"
  subtitle="Crucial indicators representing the real-time wellness of backend workloads."
/>