Shadcn UI Stats Card Block
StatsCard8 is a metric card with a status indicator below the main value. The layout shows a muted title, bold metric value, and a status badge with icon and label. The status uses color coding to indicate healthy, warning, or critical states.
Light card surface with status indicators using semantic colors. Green for healthy with a checkmark icon, yellow for warning with an alert icon, and red for critical with an X icon. Each icon sits in a subtle tinted background circle. The status label text matches the icon color for reinforcement.
This card is designed for operational metrics where status thresholds matter. The color-coded indicator provides immediate visual feedback on whether a metric is within acceptable ranges. Useful for uptime percentages, error rates, or any metric with defined health thresholds. A practical pattern for DevOps and monitoring dashboards.
The status prop accepts three predefined states. Custom status labels can override the defaults while keeping the color scheme.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
card @shadcn | Registry |