Stats Block
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { StatsBlock } from "@corew500/ui/blocks/stats-block"
<StatsBlock>Content</StatsBlock>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats* | Stat[] | — | Array of statistics to display |
| animated | enum | false | Enable count-up animation for numeric values |
| animationDuration | number | 2 | Animation duration in seconds |
| variant | enum | default | — |
| columns | enum | 3 | — |
| size | enum | default | — |
Accessibility
Screen Readers
- - Icons use aria-hidden="true" as they are decorative
Additional
- Statistics are displayed in a semantic grid layout
- Animations respect user's motion preferences via viewport detection
- Text remains readable regardless of animation state
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `stats[].label` - Statistic label
- `stats[].description` - Optional description text
Locale-Specific Formatting
- `stats[].value` - Can be pre-formatted strings or numbers
- `stats[].prefix` - Optional prefix (currency symbols, etc.)
- Numeric values use toLocaleString() for number formatting
Additional
- `stats[].suffix` - Optional suffix (%, +, K, etc.)