# Statistics 21 - Staff Salary Trend

> A staff salary card showing the total disbursed amount with growth percentage, a series legend, and a dashed multi-line monthly chart with grid lines and a hover tooltip.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/statistics-21).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/statistics-21
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/statistics-21-light-1c193838d041fa81.png
- Registry item: https://shadcnspace.com/r/statistics-21.json
- Listed: 2026-10-20, source last changed 2026-10-20

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/shadcn-space/statistics-21.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `chart`

## Files

### `src/components/shadcn-space/blocks/statistics-21/page.tsx`

```tsx
import Statistic from "@/components/shadcn-space/blocks/statistics-21/statistics";

export default function StatisticsPage() {
  return <Statistic />;
}
```

### `src/components/shadcn-space/blocks/statistics-21/statistics.tsx`

```tsx
"use client";

import { TrendingUp, Wallet } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";

const chartData = [
  { month: "Jan", teaching: 50000, admin: 14000 },
  { month: "Feb", teaching: 66000, admin: 28000 },
  { month: "Mar", teaching: 54000, admin: 18000 },
  { month: "Apr", teaching: 76000, admin: 36000 },
  { month: "May", teaching: 60000, admin: 22000 },
  { month: "Jun", teaching: 78000, admin: 40000 },
];

const chartConfig = {
  teaching: { label: "Teaching Staff", color: "var(--primary)" },
  admin: {
    label: "Admin Staff",
    color: "color-mix(in srgb, var(--primary) 35%, transparent)",
  },
} satisfies ChartConfig;

export default function Statistic() {
  return (
    <div className="lg:py-16 sm:py-10 py-8 px-4">
      <Card className="mx-auto flex w-full max-w-md flex-col">
        <CardHeader className="border-b border-border">
          <CardTitle className="flex items-center gap-2">
            <Wallet size={16} className="text-muted-foreground" />
            Staff Salary
          </CardTitle>
        </CardHeader>

        <CardContent className="flex flex-1 flex-col gap-4">
          <div className="flex items-start justify-between gap-2 pt-1">
            <div className="flex flex-col gap-0.5">
              <p className="text-2xl font-semibold tracking-[-0.3px] text-foreground">
                $542,000
              </p>
              <p className="text-sm font-normal text-muted-foreground">
                Total disbursed this term
              </p>
            </div>
            <div className="flex shrink-0 items-center gap-1 text-teal-400">
              <TrendingUp size={14} />
              <span className="text-sm font-medium">+6.1%</span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            {Object.entries(chartConfig).map(([key, item]) => (
              <div key={key} className="flex items-center gap-1.5">
                <span
                  className="size-1.5 shrink-0 rounded-full"
                  style={{ backgroundColor: item.color }}
                />
                <span className="text-xs font-normal text-muted-foreground">
                  {item.label}
                </span>
              </div>
            ))}
          </div>

          <div className="h-48 w-full shrink-0">
            <ChartContainer
              config={chartConfig}
              className="h-full! w-full"
              initialDimension={{ width: 600, height: 192 }}
            >
              <LineChart
                data={chartData}
                margin={{ top: 4, right: 4, left: -10, bottom: 0 }}
              >
                <CartesianGrid
                  vertical={false}
                  stroke="var(--border)"
                  strokeDasharray="4 4"
                />
                <XAxis
                  dataKey="month"
                  tickLine={false}
                  axisLine={false}
                  tickMargin={8}
                  tick={{ fontSize: 10, fill: "var(--muted-foreground)" }}
                />
                <YAxis
                  domain={[0, 80000]}
                  ticks={[0, 20000, 40000, 60000, 80000]}
                  tickLine={false}
                  axisLine={false}
                  tick={{ fontSize: 10, fill: "var(--muted-foreground)" }}
                  tickFormatter={(v) => `${v / 1000}k`}
                  width={36}
                />
                <ChartTooltip
                  cursor={{
                    stroke: "var(--border)",
                    strokeWidth: 1,
                    strokeDasharray: "4 4",
                  }}
                  content={<ChartTooltipContent indicator="dot" />}
                />
                <Line
                  type="monotone"
                  dataKey="teaching"
                  stroke="var(--color-teaching)"
                  strokeWidth={2}
                  strokeDasharray="5 4"
                  dot={{ r: 3, fill: "var(--color-teaching)", strokeWidth: 0 }}
                  activeDot={{ r: 4 }}
                />
                <Line
                  type="monotone"
                  dataKey="admin"
                  stroke="var(--color-admin)"
                  strokeWidth={2}
                  strokeDasharray="5 4"
                  dot={{ r: 3, fill: "var(--color-admin)", strokeWidth: 0 }}
                  activeDot={{ r: 4 }}
                />
              </LineChart>
            </ChartContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
```