Data Display

StatCard

A world-class card component for displaying statistics with icons, trends, and context. Designed for healthcare dashboards and KPI displays.

Sizes

Choose the appropriate size based on dashboard density and importance.

1,234 +12%

Small Size

1,234 +12%

Medium Size

1,234 +12%

Large Size

Healthcare Dashboard Metrics

Display key patient and practice metrics with trends and context.

1,234 +12%

Total Patients Last 30 days

342 +5%

Appointments This week

95% +2%

Eligibility Rate vs 93% last month

2.4s

Avg Response Target: <5s

Icon Variants

Use semantic color variants to convey meaning for different metric types.

156

Default

156

Primary

94%

Success

Warning

Error

Info

Trend Indicators

Trend badges with directional icons and semantic colors for quick recognition.

1,234 +12%

Positive Trend

567 -5%

Negative Trend

89% 0%

No Change

With Comparison Context

Add comparison text to provide context for trend changes.

95% +3%

Success Rate vs 92% last month

2,456 +8%

Total Visits Last 30 days · vs 2,274 prev. period

Loading State

Show skeleton loading state while fetching data.

Loading data...

With Help Text

Add help icons with tooltips to explain complex metrics.

NPS 72 +5

Patient Satisfaction

4.2 days -0.3

Avg Claims Processing Last 90 days

Interactive Cards

Make cards clickable to navigate to detailed views or drill-down pages.

Props

Prop	Type	Default	Description
`value`	`string \| number`	—	The main value to display (required)
`label`	`string`	—	Label describing the value (required)
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size variant
`period`	`string`	—	Optional period/context (e.g., "Last 30 days")
`comparison`	`string`	—	Optional comparison text (e.g., "vs last month")
`trend`	`string`	—	Optional trend indicator text (e.g., "+12%")
`trendDirection`	`'up' \| 'down' \| 'neutral'`	'neutral'	Direction of the trend
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'`	'default'	Visual variant for icon styling
`loading`	`boolean`	false	Show loading skeleton
`interactive`	`boolean`	false	Whether the card is clickable
`helpText`	`string`	—	Optional tooltip text for help icon
`icon`	`Snippet`	—	Icon snippet
`sparkline`	`Snippet`	—	Mini chart/sparkline snippet
`onclick`	`() => void`	—	Click handler

Healthcare Best Practices

Context is Key: Always include period and comparison context to help users understand trends.
Semantic Colors: Use variant="success" for positive metrics, variant="warning" for items needing attention.
Help Text: Use helpText to explain complex metrics like NPS or processing times.
Loading States: Always show loading skeletons while fetching dashboard data.
Size Appropriately: Use size="sm" for dense dashboards, size="lg" for hero metrics.

Accessibility Notes

Focus Indicators: Interactive cards have visible focus rings for keyboard navigation.
Hidden Decorative Elements: Icons are marked with aria-hidden="true".
Loading State: Uses aria-busy="true" during loading.
Reduced Motion: Hover animations respect prefers-reduced-motion preference.