Stats Card 6

Metric card showing progress toward a goal with a progress bar and target value.

Example

Monthly Goal

$7,500

75% completeTarget: $10,000

Stats Card 6 is a goal-tracking metric card:

Value: Current value with optional unit (e.g. currency).
Progress bar: Horizontal bar showing percentage toward the target; capped at 100%.
Helper text: Percentage complete and target amount below the bar.
Use case: Revenue targets, quota progress, OKRs.

Uses Card. Progress is implemented with a simple div bar; you can swap in a Progress component if available.

import { StatsCard3 } from "@/components/ui/stats-card-3";

<StatsCard3
  title="Revenue target"
  value="$18,240"
  target="$25,000"
/>

For custom percentage (e.g. when value/target are not easily parsed), pass percent={73}.