Stats Card 3

Metric card with a mini donut chart showing percentage completion alongside the value.

Example

Storage Used

75%

75 GB

of 100 GB

Stats Card 3 combines a mini donut with a value display:

Donut: Percentage fill with the ring; thin ring for a compact look.
Value and label: Main value and context (e.g. "72% of quota") beside the donut.
Use case: Quota, storage, or capacity metrics where both absolute value and percentage matter.

Uses Card, ChartContainer, and Recharts Pie.

import { StatsCard7 } from "@/components/ui/stats-card-7";

<StatsCard7 value="3.2 GB" percent={72} label="Storage used" />