Skip to content

Real teams

Collection of real teams formation configurations.

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