Dashboard Style Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/stats/stats6.tsx instead.

Usage

The file also exports stats6Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Stats6, stats6Demo } from "@/components/blocks/stats/stats6";

export default function Page() {
  return <Stats6 {...stats6Demo} />;
}

Props

Types

type DashboardStat = {
  label: string;
  value: string;
  deltaPct: number; // signed; negative renders a down arrow
  trend: number[]; // fixed bar-height values for the inline sparkline
};

Behavior notes

• Fully static: the sparkline bar heights are computed from the fixed trend array prop (each bar's height is a percentage of the max value in that stat's array), never from Math.random, so the chart looks identical on every render including card thumbnails.
• Direction is communicated with an ArrowUp/ArrowDown icon rather than color, since the design system has no semantic green/red tokens; a positive delta uses text-primary for the number and arrow, a negative delta uses text-muted-foreground, but the icon shape itself is what actually conveys direction (readable even without color).
• The sparkline bars are marked aria-hidden since they're a decorative restatement of the same trend the delta percentage already states in text; no separate accessible description is provided for the bar chart itself.