Real teams

Collection of real teams formation configurations.

Italy 2005 / 2006

1

Buffon

19

Zambrotta

5

Cannavaro

23

Materazzi

3

Grosso

8

Gattuso

16

Camoranesi

21

Pirlo

20

Perrotta

10

Totti

9

Toni

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 1, name: 'Buffon', style: { color: '#b2a557' } },
      df: [
        { number: 19, name: 'Zambrotta' },
        { number: 5, name: 'Cannavaro' },
        { number: 23, name: 'Materazzi' },
        { number: 3, name: 'Grosso' }
      ],
      cdm: [
        null,
        { number: 8, name: 'Gattuso' },
        null,
        null
      ],
      cm: [
        { number: 16, name: 'Camoranesi' },
        null,
        { number: 21, name: 'Pirlo', offset: { x: -10 } },
        { number: 20, name: 'Perrotta' }
      ],
      fw: [
        { number: 10, name: 'Totti', offset: { x: -8, y: -6 } },
        { number: 9, name: 'Toni' }
      ]
    },
    style: {
      color: '#1d32b5',
      borderColor: '#fff',
      numberColor: '#fff',
      nameColor: '#fff',
      nameBackgroundColor: '#1d32b566',
    }
  };

  return (
    <SoccerLineUp
      color="#327d61"
      pattern="circles"
      homeTeam={team}
    />
  );
}

Croatia 2017 / 2018

23

Subašić

2

Vrsaljko

6

Lovren

21

Vida

3

Strinić

7

Rakitić

11

Brozović

18

Rebić

10

Modrić

4

Perišić

17

Mandžukić

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 23, name: 'Subašić', style: {
        color: '#91f5a7',
        borderColor: '#0456a0',
        numberColor: '#0456a0',
        numberBackgroundColor: 'transparent'
        pattern: 'none',
      } },
      df: [
        { number: 2, name: 'Vrsaljko', offset: { x: 4 } },
        { number: 6, name: 'Lovren' },
        { number: 21, name: 'Vida' },
        { number: 3, name: 'Strinić', offset: { x: 4 } }
      ],
      cdm: [
        { number: 7, name: 'Rakitić' },
        { number: 11, name: 'Brozović' }
      ],
      cm: [
        { number: 18, name: 'Rebić', offset: { x: 4 } },
        { number: 10, name: 'Modrić' },
        { number: 4, name: 'Perišić', offset: { x: 4 } },
      ],
      fw: [
        { number: 17, name: 'Mandžukić' }
      ]
    },
    style: {
      color: '#fff',
      borderColor: '#fff',
      numberColor: '#0456a0',
      numberBackgroundColor: '#fff',
      pattern: 'squares',
      patternColor: '#ed1c24',
      nameColor: '#fff',
      nameBackgroundColor: '#1d32b566',
    }
  };

  return (
    <SoccerLineUp
      color="#327d61"
      pattern="circles"
      homeTeam={team}
    />
  );
}

Real Madrid 2025 / 2026

1

Courtois

8

Valverde

3

Militao

24

Huijsen

18

Carreras

14

Tchouameni

6

Camavinga

15

A. Güler

5

Bellingham

10

Mbappé

7

Vinicius

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 1, name: 'Courtois' },
      df: [
        { number: 8, name: 'Valverde' },
        { number: 3, name: 'Militao' },
        { number: 24, name: 'Huijsen' },
        { number: 18, name: 'Carreras' },
      ],
      cdm: [
        { number: 14, name: 'Tchouameni' },
      ],
      cm: [
        { number: 6, name: 'Camavinga' },
        { number: 15, name: 'A. Güler' },
      ],
      cam: [{ number: 5, name: 'Bellingham' }],
      fw: [
        { number: 10, name: 'Mbappé' },
        { number: 7, name: 'Vinicius' },
      ],
    },
    style: {
      color: '#ffffff',
      borderColor: '#333333',
      numberColor: '#333333',
      nameColor: '#ffffff',
      nameBackgroundColor: '#333333aa'
    }
  };

  return (
    <SoccerLineUp
      color="#3b754c"
      pattern="squares"
      homeTeam={team}
    />
  );
}

Manchester United 2007 / 2008

1

Van der Sar

6

Brown

5

Ferdinand

15

Vidić

3

Evra

16

Carrick

18

Scholes

4

Hargreaves

32

Tévez

10

Rooney

7

Cristiano Ronaldo

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 1, name: 'Van der Sar' },
      df: [
        { number: 6, name: 'Brown', offset: { x: 9 } },
        { number: 5, name: 'Ferdinand' },
        { number: 15, name: 'Vidić' },
        { number: 3, name: 'Evra', offset: { x: 9 } },
      ],
      cdm: [
        { number: 16, name: 'Carrick' },
      ],
      cm: [
        { number: 18, name: 'Scholes', offset: { y: -6 } },
        { number: 4, name: 'Hargreaves', offset: { x: -8 } },
      ],
      fw: [
        { number: 32, name: 'Tévez', offset: { y: -8 } },
        { number: 10, name: 'Rooney', offset: { x: 5 } },
        { number: 7, name: 'Cristiano Ronaldo' }
      ],
    },
    style: {
      color: '#b80102',
      borderColor: '#fff',
      numberColor: '#fff',
      nameColor: '#ffffff',
      nameBackgroundColor: '#11111166',
    }
  };

  return (
    <SoccerLineUp
      color="#4a7d32"
      pattern="squares"
      homeTeam={team}
    />
  );
}

Manchester City 2022 / 2023

31

Ederson

25

Akanji

3

Rúben Dias

6

Aké

5

Stones

16

Rodri

20

Bernardo Silva

17

De Bruyne

8

Gündogan

10

Grealish

9

Haaland

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 31, name: 'Ederson' },
      df: [
        { number: 25, name: 'Akanji' },
        { number: 3, name: 'Rúben Dias' },
        { number: 6, name: 'Aké' },
      ],
      cdm: [
        { number: 5, name: 'Stones' },
        { number: 16, name: 'Rodri' },
      ],
      cm: [
        { number: 20, name: 'Bernardo Silva', offset: { x: 4 } },
        { number: 17, name: 'De Bruyne' },
        { number: 8, name: 'Gündogan' },
        { number: 10, name: 'Grealish', offset: { x: 4 } },
      ],
      fw: [
        { number: 9, name: 'Haaland' }
      ],
    },
    style: {
      color: '#7ab2e1',
      borderColor: '#fff',
      numberColor: '#fff',
      nameColor: '#ffffff',
      nameBackgroundColor: '#33333366',
    }
  };

  return (
    <SoccerLineUp
      color="#327d61"
      homeTeam={team}
    />
  );
}

Real Madrid 2016 / 2017

1

Navas

2

Carvajal

5

Varane

4

Sergio Ramos

12

Marcelo

14

Casemiro

8

Kroos

19

Modric

11

Bale

9

Benzema

7

C. Ronaldo

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 1, name: 'Navas' },
      df: [
        { number: 2, name: 'Carvajal', offset: { x: 6 } },
        { number: 5, name: 'Varane' },
        { number: 4, name: 'Sergio Ramos' },
        { number: 12, name: 'Marcelo', offset: { x: 6 } }
      ],
      cdm: [
        { number: 14, name: 'Casemiro' },
      ],
      cm: [
        { number: 8, name: 'Kroos', offset: { x: -6 } },
        { number: 19, name: 'Modric', offset: { x: -2 } }
      ],
      fw: [
        { number: 11, name: 'Bale', offset: { x: -4 } },
        { number: 9, name: 'Benzema', offset: { x: 4 } },
        { number: 7, name: 'C. Ronaldo', offset: { x: 2, y: 2 } }
      ],
    },
    style: {
      color: '#6b3497',
      borderColor: '#fff',
      numberColor: '#fff',
      nameColor: '#ffffff',
      nameBackgroundColor: '#33333388',
    }
  };

  return (
    <SoccerLineUp
      pattern="lines"
      homeTeam={team}
    />
  );
}

Sporting CP 2002 / 2003

1

Nélson

22

Beto

15

Contreras

4

Quiroga

23

Rui Jorge

17

Bento

20

Quaresma

30

Toñito

28

Cristiano Ronaldo

16

Jardel

9

Kutuzov

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const team: Team = {
    squad: {
      gk: { number: 1, name: 'Nélson' },
      df: [
        { number: 22, name: 'Beto', offset: { x: 4 } },
        { number: 15, name: 'Contreras' },
        { number: 4, name: 'Quiroga' },
        { number: 23, name: 'Rui Jorge', offset: { x: 4 } }
      ],
      cdm: [
        { number: 17, name: 'Bento' },
      ],
      cm: [
        { number: 20, name: 'Quaresma', offset: { x: 4 } },
        { number: 30, name: 'Toñito' },
        { number: 28, name: 'Cristiano Ronaldo', offset: { x: 4 } }
      ],
      fw: [
        null,
        { number: 16, name: 'Jardel' },
        { number: 9, name: 'Kutuzov' },
        null
      ],
    },
    style: {
      color: '#ffffff',
      borderColor: '#ffffff',
      numberColor: '#333333',
      numberBackgroundColor: '#ffffff',
      pattern: 'lines',
      patternColor: '#008057',
      nameColor: '#ffffff',
      nameBackgroundColor: '#33333388',
    }
  };

  return (
    <SoccerLineUp
      color="#567858"
      pattern="lines"
      homeTeam={team}
    />
  );
}