# Statistics 20 - Fees Paid Trend

> A fees paid card showing the total collected amount with growth percentage and a monthly gradient area 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-20).

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/shadcn-space/statistics-20.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-20/page.tsx`

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

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

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

```tsx
"use client";

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

const chartData = [
  { month: "Jan", amount: 42000 },
  { month: "Feb", amount: 38000 },
  { month: "Mar", amount: 51000 },
  { month: "Apr", amount: 46000 },
  { month: "May", amount: 58000 },
  { month: "Jun", amount: 62000 },
];

const chartConfig = {
  amount: { label: "Fees Paid", color: "var(--primary)" },
} 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">
            <CircleDollarSign size={16} className="text-muted-foreground" />
            Fees Paid
          </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">
                $297,000
              </p>
              <p className="text-sm font-normal text-muted-foreground">
                Total collected 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">+14.2%</span>
            </div>
          </div>

          <div className="h-48 w-full shrink-0">
            <ChartContainer
              config={chartConfig}
              className="h-full! w-full"
              initialDimension={{ width: 600, height: 192 }}
            >
              <AreaChart
                data={chartData}
                margin={{ top: 4, right: 4, left: -10, bottom: 0 }}
              >
                <defs>
                  <linearGradient
                    id="statistics20Gradient"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop
                      offset="0%"
                      stopColor="var(--primary)"
                      stopOpacity={0.2}
                    />
                    <stop
                      offset="100%"
                      stopColor="var(--primary)"
                      stopOpacity={0}
                    />
                  </linearGradient>
                </defs>
                <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
                  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"
                      className="[&_.justify-between]:gap-2"
                    />
                  }
                />
                <Area
                  type="monotone"
                  dataKey="amount"
                  stroke="var(--color-amount)"
                  strokeWidth={2}
                  fill="url(#statistics20Gradient)"
                  dot={false}
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
```