StatCard
Compact metric card with a colored left border, uppercase label, and prominent value. Use for dashboard summaries.
Example
status running
total queries 30,476
queries blocked 1,338
block rate 4.4%
Variants
default 1,024
success 1,024
info 1,024
danger 1,024
warning 1,024
primary 1,024
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase label shown above the value |
value | string | number | — | The metric value (ignored if children provided) |
variant | 'default' | 'success' | 'info' | 'danger' | 'warning' | 'primary' | 'default' | Color theme for left border and background tint |
class | string | — | Additional CSS classes |
children | Snippet | — | Custom value content (overrides value) |
Usage
<script>
import { StatCard } from '@chrissnell/chonky-ui';
</script>
<StatCard label="total queries" value="30,476" variant="info" />
<StatCard label="queries blocked" value={1338} variant="danger" />