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;
};

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'

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 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'
  }
};