The football pitch layer for the web.
PitchKit is mplsoccer for the browser — declarative pitch visualisations with typed accessors, responsive SVG marks, canvas heatmaps, and theming that works like the rest of your design system.
Click anywhere to extend the move. The readout tracks provider coordinates.
Composable layers
Scatter, arrows, comets, heatmaps, Voronoi — declared as JSX children of <Pitch>, stacked in render order like any other React tree.
Provider-agnostic coordinates
StatsBomb, Opta, and UEFA coordinate systems out of the box. Feed data in its native units; one transform pipeline keeps everything aligned.
Responsive by default
Every pitch fills its container via ResizeObserver, with a correct-aspect-ratio first paint. Explicit width/height is the opt-out, not the default.
CSS-variable theming
Colours are --pitch-* variables, shadcn-style — set them once in your stylesheet, get dark mode for free, override per-chart with a wrapper div.
SSR-ready
Marks render to real SVG on the server — verified against Next.js App Router. No hydration flicker, no client-only placeholder boxes.
Hybrid SVG + Canvas
Interactive marks stay crisp, inspectable SVG; dense heatmaps paint to canvas. Each surface does what it's actually good at.
Coming from mplsoccer?
The concepts map one-to-one — pitches, marks, accessors. The cheatsheet translates each mplsoccer call to its PitchKit equivalent.
Read the migration guide