StatCard

Data Display

Statistical card with trends, icons, and metric visualization for dashboards

Basic Usage

Revenue

$24.3k
+12%

Orders

1.2k
-3%

Visitors

8.9k
+4%

Real World Example

Revenue

$24.3k
+12%

Orders

1.2k
-3%

Visitors

8.9k
+4%

Usage Guidelines

When to Use

  • Dashboard metrics
  • KPI displays
  • Analytics

Accessibility

  • Values and trends announced
  • Proper heading hierarchy

Performance

  • Static rendering
  • Lightweight trend calculation

Common Mistakes

  • Trend without context
  • Too many stats on one card

Frequently Asked Questions

StatCard displays statistics with trends, icons, and metric visualization for dashboards.
Yes, StatCard can display up/down trends with percentage changes.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

ToggleGroup

Next

Table