Skip to content
React Soccer Lineup

Real matches

Collection of real matches configurations.

Germany - Brazil 2002

Section titled “Germany - Brazil 2002”
1
Kahn
2
Linke
5
Ramelow
21
Metzelder
22
Frings
8
Hamann
16
Jeremies
17
Bode
19
Schneider
11
Klose
7
Neuville
1
Marcos
2
Cafú
3
Lúcio
4
Edmílson
5
Roque Júnior
6
Roberto Carlos
8
Gilberto Silva
11
Ronaldinho
15
Kléberson
10
Rivaldo
9
Ronaldo
 
import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Kahn', style: { color: '#6680bd' } },
      df: [
        { number: 2, name: 'Linke' },
        { number: 5, name: 'Ramelow' },
        { number: 21, name: 'Metzelder' }
      ],
      cdm: [
        { number: 22, name: 'Frings' },
        { number: 8, name: 'Hamann' },
        { number: 16, name: 'Jeremies' },
        { number: 17, name: 'Bode' }
      ],
      cam : [
        { number: 19, name: 'Schneider' },
      ],
      fw: [
        { number: 11, name: 'Klose' },
        { number: 7, name: 'Neuville' }
      ]
    },
    style: {
      color: '#fff',
      borderColor: '#333',
      numberColor: '#333',
      nameColor: '#fff',
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Marcos', style: { color: '#ccc', borderColor: '#fedd00' } },
      df: [
        { number: 2, name: 'Cafú', offset: { x: -6 } },
        { number: 3, name: 'Lúcio' },
        { number: 4, name: 'Edmílson' },
        { number: 5, name: 'Roque Júnior' },
        { number: 6, name: 'Roberto Carlos', offset: { x: -6 } }
      ],
      cm: [
        null,
        { number: 8, name: 'Gilberto Silva' },
        { number: 11, name: 'Ronaldinho', offset: { x: -6 } },
        { number: 15, name: 'Kléberson' },
        null
      ],
      fw: [
        { number: 10, name: 'Rivaldo' },
        { number: 9, name: 'Ronaldo' }
      ]
    },
    style: {
      color: '#fedd00',
      borderColor: '#009739',
      numberColor: '#009739',
      nameColor: '#fff',
    }
  };


  return (
    <SoccerLineUp
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}

Borussia Dortmund - Real Madrid 2024

Section titled “Borussia Dortmund - Real Madrid 2024”
1
Kobel
26
Ryerson
15
Hummels
4
Schlotterbeck
22
Maatsen
23
Can
20
Sabitzer
19
Brandt
10
Sancho
27
Füllkrug
14
Adeyemi
1
Courtois
2
Carvajal
22
Rüdiger
6
Nacho
23
Mendy
12
Camavinga
15
Valverde
8
Kroos
5
Bellingham
11
Rodrygo
7
Vinicius
 
import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Kobel' },
      df: [
        { number: 26, name: 'Ryerson', offset: { x: 9 } },
        { number: 15, name: 'Hummels' },
        { number: 4, name: 'Schlotterbeck' },
        { number: 22, name: 'Maatsen', offset: { x: 9 } },
      ],
      cm: [
        { number: 23, name: 'Can' },
        { number: 20, name: 'Sabitzer' },
      ],
      cam: [
        { number: 19, name: 'Brandt', offset: { x: -6 } },
      ],
      fw: [
        { number: 10, name: 'Sancho', offset: { x: -6 } },
        { number: 27, name: 'Füllkrug' },
        { number: 14, name: 'Adeyemi', offset: { x: -6 } },
      ],
    },
    style: {
      color: '#ffd900',
      borderColor: '#000',
      numberColor: '#000',
      nameColor: '#ffffff',
      nameBackgroundColor: '#00000044',
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Courtois' },
      df: [
        { number: 2, name: 'Carvajal', offset: { x: -9 } },
        { number: 22, name: 'Rüdiger' },
        { number: 6, name: 'Nacho' },
        { number: 23, name: 'Mendy', offset: { x: -9 } },
      ],
      cdm: [
        { number: 12, name: 'Camavinga' },
      ],
      cm: [
        { number: 15, name: 'Valverde', offset: { x: -3 } },
        { number: 8, name: 'Kroos', offset: { x: 6 } },
      ],
      cam: [{ number: 5, name: 'Bellingham' }],
      fw: [
        { number: 11, name: 'Rodrygo' },
        { number: 7, name: 'Vinicius' },
      ],
    },
    style: {
      color: '#ffffff',
      borderColor: '#daa530',
      numberColor: '#222a4f',
      nameColor: '#ffffff',
      nameBackgroundColor: '#222a4f55',
    }
  };


  return (
    <SoccerLineUp
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}

Bayern München - AC Milan 2010

Section titled “Bayern München - AC Milan 2010”
22
Butt
21
Lahm
5
Van Buyten
6
Demichelis
28
Badstuber
10
Robben
17
Van Bommel
31
Schweinsteiger
8
Altintop
11
Olić
25
Müller
12
Júlio César
13
Maicon
6
Lúcio
25
Samuel
26
Chivu
4
Zanetti
19
Cambiasso
10
Sneijder
9
Eto'o
22
Milito
27
Pandev
 
import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 22, name: 'Butt' },
      df: [
        { number: 21, name: 'Lahm', offset: { x: 9 } },
        { number: 5, name: 'Van Buyten', offset: { x: -6 } },
        { number: 6, name: 'Demichelis', offset: { x: -6 } },
        { number: 28, name: 'Badstuber', offset: { x: 9 } },
      ],
      cm: [
        { number: 10, name: 'Robben', offset: { x: 9 } },
        { number: 17, name: 'Van Bommel' },
        { number: 31, name: 'Schweinsteiger' },
        { number: 8, name: 'Altintop', offset: { x: 9 } },
      ],
      fw: [
        { number: 11, name: 'Olić' },
        { number: 25, name: 'Müller' },
      ],
    },
    style: {
      color: '#fff',
      borderColor: '#ed0037',
      numberColor: '#ed0037',
      numberBackgroundColor: '#fff',
      pattern: 'stripes',
      patternColor: '#ed0037',
      nameColor: '#fff',
      nameBackgroundColor: '#ed003755',
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: { number: 12, name: 'Júlio César' },
      df: [
        { number: 13, name: 'Maicon', offset: { x: -6 } },
        { number: 6, name: 'Lúcio' },
        { number: 25, name: 'Samuel' },
        { number: 26, name: 'Chivu', offset: { x: -6 } },
      ],
      cm: [
        { number: 4, name: 'Zanetti' },
        { number: 19, name: 'Cambiasso' },
      ],
      cam: [
        { number: 10, name: 'Sneijder' },
      ],
      fw: [
        { number: 9, name: 'Eto\'o' },
        { number: 22, name: 'Milito' },
        { number: 27, name: 'Pandev' },
      ],
    },
    style: {
      color: '#14499e',
      borderColor: '#14499e',
      numberColor: '#fff',
      numberBackgroundColor: '#14499e',
      pattern: 'stripes',
      patternColor: '#231f20',
      nameColor: '#fff',
      nameBackgroundColor: '#231f2088',
    }
  };


  return (
    <SoccerLineUp
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}

River Plate - Boca Juniors 2018

Section titled “River Plate - Boca Juniors 2018”
1
Armani
29
Montiel
2
Maidana
22
Pinola
20
Casco
23
Ponzio
26
Fernández
24
Pérez
15
Palacios
10
Martínez
27
Pratto
1
Andrada
24
Buffarini
21
Izquierdoz
6
Magallán
20
Olaza
15
Nández
16
Barrios
8
Pérez
22
Villa
18
Benedetto
7
Pavón
 
import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Armani',
        style: {
          color: '#333333',
          borderColor: '#fff',
          numberColor: '#fff',
          numberBackgroundColor: 'transparent',
          pattern: 'none'
        }
      },
      df: [
        { number: 29, name: 'Montiel', offset: { x: 8 } },
        { number: 2, name: 'Maidana' },
        { number: 22, name: 'Pinola' },
        { number: 20, name: 'Casco', offset: { x: 8 } },
      ],
      cdm: [
        { number: 23, name: 'Ponzio' },
      ],
      cm: [
        { number: 26, name: 'Fernández', offset: { x: 5 } },
        { number: 24, name: 'Pérez' },
        { number: 15, name: 'Palacios' },
        { number: 10, name: 'Martínez', offset: { x: 5 } },
      ],
      fw: [
        { number: 27, name: 'Pratto' },
      ],
    },
    style: {
      color: '#fff',
      borderColor: '#ed0037',
      numberColor: '#ed0037',
      numberBackgroundColor: '#fff',
      pattern: 'right-slash',
      patternColor: '#ed192d',
      nameColor: '#fff',
      nameBackgroundColor: '#33333355',
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: { number: 1, name: 'Andrada',
        style: {
          color: '#83de94',
          borderColor: '#333',
          numberColor: '#333',
          numberBackgroundColor: 'transparent',
          pattern: 'none'
        }
      },
      df: [
        { number: 24, name: 'Buffarini' },
        { number: 21, name: 'Izquierdoz', offset: { x: 5 } },
        { number: 6, name: 'Magallán', offset: { x: 5 } },
        { number: 20, name: 'Olaza' },
      ],
      cm: [
        null,
        { number: 15, name: 'Nández', offset: { x: 5 } },
        { number: 16, name: 'Barrios' },
        { number: 8, name: 'Pérez', offset: { x: 5 } },
        null
      ],
      fw: [
        { number: 22, name: 'Villa', offset: { x: 5 } },
        { number: 18, name: 'Benedetto' },
        { number: 7, name: 'Pavón', offset: { x: 5 } },
      ],
    },
    style: {
      color: '#133b5b',
      borderColor: '#133b5b',
      numberColor: '#fff',
      pattern: 'thick-line',
      patternColor: '#fbcb5b',
      nameColor: '#fff',
      nameBackgroundColor: '#231f2088',
    }
  };


  return (
    <SoccerLineUp
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}