Shadcn UI Stats Card Block
StatsCard2 is a metric card combining a large value display with a mini sparkline chart below. The card has a muted title at the top, bold metric value, and a small area chart showing recent trend data without axes or labels.
Light card surface with the sparkline using theme chart colors. The area fill has a subtle gradient from semi-transparent to transparent, creating depth. The chart is minimal with no grid lines, tooltips, or axis labels. Compact height keeps focus on the trend shape rather than specific data points.
This card adds visual context to a metric without the complexity of a full chart widget. The sparkline provides at-a-glance trend information. More visually interesting than a simple number card while remaining compact for dashboard grids.
The sparkline scales responsively within the card width. Works well alongside other stats cards in mixed layouts.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |