Skip to content
React Soccer Lineup

React Soccer Lineup

Display beautiful soccer formations and lineups in your React applications
Get started Try the Playground
1
2
5
4
3
6
8
10
11
9
7
1
2
4
5
3
8
6
7
10
9
11
import SoccerLineUp from 'react-soccer-lineup';


import { homeTeam, awayTeam } from '../data/teams.ts';


function App() {
  return (
    <SoccerLineUp
      color="#327d61"
      pattern="lines"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}

Easy to use

No configuration, just import the component and use it in your React applications.

Flexible sizing

Choose from small, normal, big, responsive, or fill modes. Perfect for any layout from widgets to full-screen displays.

All formations

Support for all common soccer formations: 4-4-2, 4-3-3, 3-5-2, 4-2-3-1, etc., and any custom setup you need.

Full customization

Customize pitch colors, team styles, player markers, and add grass patterns.

TypeScript ready

Complete type definitions included. Get full IntelliSense and type safety in your IDE.

Interactive players

Add click handlers to players, display names and numbers, and create interactive tactical boards.