Stat Card
Installation
pnpm add @corew500/uiUsage
import { StatCard } from "@corew500/ui/stat-card"
<StatCard>Content</StatCard>Variants
statCardVariants
| Axis | Values | Default |
|---|---|---|
| status | defaultprimarysuccesswarningdestructive | default |
| size | smdefaultlg | default |
statCardLabelVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
statCardValueVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
statCardIconVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
| status | defaultprimarysuccesswarningdestructive | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | The statistic label (e.g., "Active Users") |
| value* | enum | — | The numeric value to display |
| prefix | string | — | Optional prefix (e.g., "$", "+") |
| suffix | string | — | Optional suffix (e.g., "%", "K") |
| active | enum | false | Whether this card is currently active/selected |
| icon | enum | — | Optional icon to display |
| status | enum | default | — |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- - Uses button element for proper keyboard interaction
- Focus ring visible for keyboard navigation
Screen Readers
- aria-pressed indicates active/selected state
- Icons use aria-hidden="true" as they're decorative
Additional
- Disabled state prevents interaction and reduces opacity
Localization
Translatable Content
- - Label and value text should be pre-translated
- Prefix/suffix strings should be pre-translated
Locale-Specific Formatting
- Number formatting should be handled by consuming application