Pokemon Stat
Base stat rows (HP, Attack, Defense…) composed on shadcn/ui Field and Progress, with per-stat color, recomposable parts, and a render-prop list.
Installation
Usage
Each row is a shadcn/ui Field: a FieldLabel (name + value) above a Progress, linked via htmlFor / id — the same pattern as the shadcn progress-with-label example. The root is layout + context: you compose the parts. For known stats (hp, attack, defense, special-attack, special-defense, speed) the label and color are resolved automatically; the bar scales against max (default 255).
By default PokemonStatLabel renders name … value (value pushed right with ml-auto). Pass children to recompose the label row.
Examples
Render-prop list
PokemonStatList accepts data via stats (an array of entries or a { stat: value } record) and a render prop as children that decides how each row is rendered. The list only iterates, normalizes order, and sets the key.
Tip
The render prop passes a function as children, so the consumer must be a Client Component ("use client").
Manual composition
Without stats, PokemonStatList is just a spacing wrapper — compose rows by hand.
Custom label
Because all parts read from context, you can recompose the label row freely. PokemonStatValue carries the value — place it wherever you need it.
Custom stat
For stats outside the known set, pass label, color, and max yourself.
Accessibility
PokemonStatBar is built on the shadcn/ui Progress component (which wraps Radix UI), so it already exposes role="progressbar" with aria-valuenow / aria-valuemin / aria-valuemax. Additionally:
- The actual value (value / max, not the percentage) is announced via aria-valuetext.
- PokemonStatLabel is a FieldLabel with htmlFor pointing to the bar's id (generated with useId), matching the shadcn progress-with-label pattern.
API Reference
PokemonStat
Root of a stat row — a shadcn/ui Field. Owns value + max, derives the percentage and color, and shares them through context. Also accepts all Field props.
| Prop | Type | Default |
|---|---|---|
stat | — | |
value | number | — |
max | number | 255 |
label | string | nombre del stat |
color | string | color del stat / --primary |
PokemonStatLabel
Label row above the bar, rendered as a shadcn/ui FieldLabel and linked to the bar via htmlFor. By default renders name … value; pass children to recompose. Accepts all FieldLabel props.
PokemonStatValue
Numeric stat value. Defaults to value from context; pass children to override. Accepts all native <span> props.
PokemonStatBar
The bar — a shadcn/ui Progress recolored per stat via the --stat-color CSS variable.
| Prop | Type | Default |
|---|---|---|
...props | React.ComponentProps<typeof Progress> | — |
PokemonStatList
Spacing wrapper. With stats + a children render prop it renders from data; without them, compose <PokemonStat> manually. Also accepts all native <div> props.
| Prop | Type | Default |
|---|---|---|
stats | PokemonStatsInput | — |
children | — |
usePokemonStat
Context access hook — must be used inside <PokemonStat>.
| Property | Type | Description |
|---|---|---|
| name | PokemonStatName | undefined | The stat passed to the root, if any. |
| value / max | number | Base value and scale ceiling. |
| percent | number | value / max clamped to 0–100 (consumed by PokemonStatBar). |
| label | string | Resolved display label. |
| color | string | Resolved stat color. |
| id | string | Links FieldLabel (htmlFor) to the bar (id). |
Constants
| Export | Description |
|---|---|
| POKEMON_STAT_ORDER | Canonical stat order (as returned by PokéAPI). |
| POKEMON_STAT_LABEL | Stat → label map (hp → HP, special-attack → Sp. Atk…). |
| POKEMON_STAT_COLOR | Stat → color map (inline hex values, no external tokens). |
| POKEMON_STAT_MAX | Practical ceiling for a base stat (255). |