Pokemon Sprite
An image element with a fallback for rendering Pokémon sprites. Built on Radix UI Avatar.
PK
Installation
Usage
PokemonSprite is built on Radix UI Avatar and inherits its image-load lifecycle: PokemonSpriteImage renders once the image loads, and PokemonSpriteFallback is shown while it loads or if it fails.
Size scale
The size prop controls the square dimensions of the sprite. Use card when placing a sprite inside a PokemonCard media slot — it is sized to fit that context precisely.
| Value | Size |
|---|---|
| xs | 20 px |
| sm | 24 px |
| default | 32 px |
| md | 40 px |
| lg | 80 px |
| xl | 112 px |
| 2xl | 144 px |
| card | 160 px |
Examples
Sprite group
BCS
+9
API Reference
PokemonSprite
Root sprite container — wraps Radix UI Avatar.Root. Accepts all Avatar.Root props plus size.
| Prop | Type | Default |
|---|---|---|
size | "default" |
Subcomponents
| Component | Base | Description |
|---|---|---|
| PokemonSpriteImage | Avatar.Image | Renders the Pokémon image. Accepts all Avatar.Image props. |
| PokemonSpriteFallback | Avatar.Fallback | Shown while the image loads or if it fails. Accepts all Avatar.Fallback props. |
| PokemonSpriteBadge | <span> | A badge positioned over the sprite (bottom-right corner). Accepts all <span> props. |
| PokemonSpriteGroup | <div> | Groups multiple sprites with overlap. Accepts all <div> props. |
| PokemonSpriteGroupCount | <div> | Displays a remaining count chip inside a group. Accepts all <div> props. |