Sports Card

Trading card component with rarity badges, stats display, and holographic effects.

Preview

legendary

Mike Trout

Center Field · Los Angeles Angels

.303

AVG

104

RBI

Usage

import { SportsCard } from "@/components/profile"

<SportsCard
  name="Mike Trout"
  team="Los Angeles Angels"
  position="Center Field"
  image="/player.jpg"
  stats={[
    { label: "AVG", value: ".303" },
    { label: "HR", value: "40" },
    { label: "RBI", value: "104" },
  ]}
  rarity="legendary"
  cardNumber="001"
  year="2024"
/>

Rarity Levels

common

Player Name

Position · Team

100

STAT

rare

Player Name

Position · Team

100

STAT

epic

Player Name

Position · Team

100

STAT

legendary

Player Name

Position · Team

100

STAT

<SportsCard rarity="common" />    // Gray border
<SportsCard rarity="rare" />      // Blue gradient
<SportsCard rarity="epic" />      // Purple gradient
<SportsCard rarity="legendary" /> // Gold gradient + glow

Visual Variants

rare

Standard

Position · Team

standard

epic

Holographic

Position · Team

holographic

common

Vintage

Position · Team

vintage

Props

Prop	Type	Default	Description
name	string	-	Player/card name
team	string	-	Team name
position	string	-	Player position
image	string	-	Player/card image URL
stats	Stat[]	[]	Array of stat objects
rarity	"common" \| "rare" \| "epic" \| "legendary"	"common"	Card rarity level
cardNumber	string	-	Card number in set
year	string	-	Card year
variant	"standard" \| "holographic" \| "vintage"	"standard"	Card visual style

Stat Type

interface Stat {
  label: string
  value: string
}