Stat Card
A fully accessible, token-driven StatCard component built with strict WAI-ARIA compliance.
tsx
import { StatCard } from '@nofinite/nui';Interactive Preview
Loading preview...
Usage
Basic Example
tsx
import { StatCard } from '@nofinite/nui';
<StatCard />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label* | ReactNode | — | — |
value* | ReactNode | — | — |
icon | ReactNode | — | — |
trend | enum | — | — |
trendValue | ReactNode | — | — |
trendLabel | ReactNode | — | — |
isLoading | boolean | false | — |
info | ReactNode | — | — |
progressValue | number | — | — |
progressMax | number | 100 | — |
accent | enum | default | — |
sparklineData | number[] | — | — |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.