Player Spotlight
stableFeatured player Card with large Avatar, season stats, and shadcn Progress bars. Use to anchor a homepage or a club page.
Live Preview
RT
Ryan Thompson
Forward · Charlotte FC
PremiershipTop Scorer
14
Goals
7
Assists
18
Games
Season Performance
2025–26 CPSL Premiership · Match Day 18
Shooting Accuracy72%
Pass Completion84%
Dribble Success61%
Aerial Duels Won55%
Distance Covered88%
1,530
Mins Played
2
Yellow Cards
0
Red Cards
5×
Man of the Match
tsx
<PlayerSpotlight
name="Ryan Thompson"
position="Forward"
club="Charlotte FC"
initials="RT"
color="#697279"
goals={14}
assists={7}
games={18}
badges={[
{ label: "Premiership", variant: "premier" },
{ label: "Top Scorer", variant: "gold" },
]}
stats={[
{ label: "Shooting Accuracy", value: 72, color: "#697279" },
{ label: "Pass Completion", value: 84, color: "#697279" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | Player's full name. |
position* | string | — | Position label (e.g. "Forward"). |
club* | string | — | Club name. |
initials* | string | — | Two-letter avatar initials. |
color* | string | — | Avatar tint hex. |
goals* | number | — | Goal count. |
assists* | number | — | Assist count. |
games* | number | — | Games played. |
badges | PlayerBadge[] | — | Status pills shown under the name. |
stats | PerformanceStat[] | — | Progress-bar stats shown in the body. |
miniStats | MiniStat[] | — | Small KPI tiles shown at the bottom. |
season | string | — | Season label. |
competition | string | — | Competition label. |
matchDay | number | — | Current match-day number. |