Shadcn UI Stats Card Block
StatsCard3 is a goal-tracking metric card with a current value, progress bar, and target display. The layout shows a muted title, bold current value with currency unit, a horizontal progress bar, and helper text showing percentage complete alongside the target amount.
Light card surface with standard shadcn progress bar styling. The progress indicator uses the default primary color. Helper text below the bar is muted and split between left-aligned percentage and right-aligned target. Numbers are formatted with locale-aware thousand separators.
This is a practical goal-tracking card useful for revenue targets, quota progress, or any metric with a defined goal. The progress bar provides immediate visual feedback on completion status. Simple implementation with clear information hierarchy.
The card handles edge cases like values exceeding the target by capping the progress bar at 100%. Works well for sales dashboards, fundraising trackers, or OKR displays.
Dependencies
| Package | Type |
|---|---|
card @shadcn | Registry |
progress @shadcn | Registry |