Player Spotlight

stable

Featured player Card with large Avatar, season stats, and shadcn Progress bars. Use to anchor a homepage or a club page.

Live Preview

Ryan Thompson

Forward · Charlotte FC

PremiershipTop Scorer

Goals

Assists

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

Yellow Cards

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.