Shadcn UI Stats Card Block
StatsCard7 is a metric card with a mini donut chart on the left and value display on the right. The donut shows a percentage fill with the percentage number centered inside the ring. Adjacent to the chart sits the main value and a context label.
Light card surface with the donut using chart colors for the filled portion and muted color for the remainder. The donut has a centered hole with percentage text overlaid. The chart and value are horizontally aligned with a small gap. The donut ring is thin to keep the visual compact.
This card works well for quota, storage, or capacity metrics where the percentage of a whole is meaningful. The donut provides immediate visual feedback on utilization level. More visually engaging than a simple progress bar while conveying similar information. A polished pattern for resource monitoring dashboards.
The donut animates from the top and fills clockwise. Works well for metrics where both the absolute value and percentage are important to show.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |