Styling guide

Pitch styling

Patterns

Add visual patterns to the pitch:

Lines

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp pattern="lines" />;
}

Squares

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp pattern="squares" />;
}

Circles

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp pattern="circles" />;
}

Colors

Customize the pitch background color with the color prop:

<SoccerLineUp color="#03a6A1" pattern="lines" />

Team styling

TeamStyle properties

type TeamStyle = {
  color?: string;
  borderColor?: string;
  numberColor?: string;
  numberBackgroundColor?: string;
  nameColor?: string;
  nameBackgroundColor?: string;
  pattern?: PlayerPattern;
  patternColor?: string;
  size?: PlayerSize;
};

Default values

Property	Home Team	Away Team
color	#ffffff	#333333
borderColor	#ffffff	#333333
numberColor	#333333	#ffffff
numberBackgroundColor	'transparent'	'transparent'
nameColor	#333333	#ffffff
nameBackgroundColor	'transparent'	'transparent'
pattern	’none'	'none’
patternColor	'transparent'	'transparent'
size	'auto'	'auto'

Custom team colors

const team: Team = {
  squad: { /* ... */ },
  style: {
    color: '#a71f28',
    borderColor: '#ffffff',
    numberColor: '#ffffff',
    nameColor: '#ffffff',
    nameBackgroundColor: '#33333cc'
  }
};

1

Alisson

12

Bradley

5

Konate

4

Van Dijk

26

Robertson

38

Gravenberch

8

Szoboszlai

10

Mac Allister

11

Salah

22

Ekitike

7

Wirtz

Player size

Control the diameter of the player markers with the size property:

Value	Diameter
'auto'	Scales with the pitch (default)
'small'	24px
'medium'	32px
'big'	44px
number	Custom diameter in pixels

With explicit sizes (presets or a number), the number and name fonts, the name label spacing and paddings, and the marker border all scale proportionally with the diameter. With 'auto', the markers keep the classic behavior and scale with the pitch.

const team: Team = {
  squad: { /* ... */ },
  style: {
    color: '#a71f28',
    borderColor: '#ffffff',
    numberColor: '#ffffff',
    size: 'big'
  }
};

1

12

5

4

26

38

8

10

11

22

7

Player styling

Individual player overriding

Override team styles for specific players:

const captain: Player = {
  number: 10,
  name: 'Captain',
  style: {
    color: '#ffd700',
    borderColor: '#333',
    numberColor: '#333',
    nameBackgroundColor: '#ffd700cc',
    nameColor: '#000000'
  }
};

1

Alisson

12

Bradley

5

Konate

4

Van Dijk

26

Robertson

38

Gravenberch

8

Szoboszlai

10

Mac Allister

11

Salah

22

Ekitike

7

Wirtz

Style Inheritance

Styles cascade in this order (later overrides earlier):

1. Default colors (home: white, away: dark)
2. Team style (team.style)
3. Player style (player.style)

// Player inherits team style, but overrides color
const team: Team = {
  squad: {
    gk: { number: 1 },
    df: [
      { number: 2 },  // Uses team style
      { number: 4, style: { color: '#ffd700' } },  // Gold, rest from team
      { number: 5 },  // Uses team style
      { number: 3 }   // Uses team style
    ],
    // ...
  },
  style: {
    color: '#c8102e',
    borderColor: '#ffffff'
  }
};