Pro Components

Base Components

Stats Card 2

Metric card with a color-coded status indicator (healthy, warning, or critical).

Example

System Status
99.9%
Healthy
System Status
99.9%
Warning
System Status
99.9%
Critical

Introduction

Stats Card 2 is a metric card with a status indicator:
  • Status: Color-coded badge with icon—healthy (green), warning (yellow), or critical (red).
  • Layout: Muted title, bold metric value, then status badge with icon and label.
  • Use case: Operational metrics (uptime, error rates) where health thresholds matter.
Uses Card and lucide-react icons.

Usage

import { StatsCard8 } from "@/components/ui/stats-card-8";

<StatsCard8 status="healthy" />
<StatsCard8 status="warning" />
<StatsCard8 status="critical" />

On this page

ExampleIntroductionInstallationUsage