# Introduction

Source: https://www.pitchkitjs.com/docs

> What PitchKit is, and how the pieces fit together.

PitchKit is a React-first football pitch visualisation library for the web — mplsoccer's
surface, built for the browser. `@pitchkit/core` is a framework-agnostic engine (coordinate
transforms, SVG + Canvas rendering); `@pitchkit/react` is the officially supported set of
declarative bindings on top of it, split into two families: **components** (the pitch itself)
and **overlays** (data plotted onto it).

## Install

```bash
npm install @pitchkit/core @pitchkit/react
```

## The smallest thing that works

```tsx
"use client";

import { Pitch, Scatter } from "@pitchkit/react";

const shots = [
  { x: 108, y: 38, xg: 0.62 },
  { x: 96, y: 48, xg: 0.15 },
];

export function ShotMap() {
  return (
    <Pitch type="statsbomb">
      <Scatter data={shots} x={(s) => s.x} y={(s) => s.y} r={(s) => 3 + s.xg * 9} />
    </Pitch>
  );
}
```

That's a responsive, server-renderable shot map. Every layer takes plain data plus
**accessor functions** for its visual properties — `x`, `y`, and most other props accept
either a static value or a per-datum function, which is how PitchKit stays shape-agnostic
across providers (StatsBomb, Opta, UEFA, or your own).

For the same thing built up step by step against a real match — loading the Euro 2024 final,
finding the move that produced England's goal, and plotting it — start with the
&#x2A;*[Quickstart](/docs/quickstart)**.

## Finding your way around

* **[Quickstart](/docs/quickstart)** — the guided build: a real match in, a real passage of
  play out, in four steps.
* **[Guides](/docs/guides/coordinates)** — the concepts: coordinates & pitch types,
  layers, responsive behaviour, and Next.js/SSR.
* **[Components](/docs/components/pitch)** — the pitch container that owns the coordinate
  system: `<Pitch>` and `<VerticalPitch>`.
* **Overlays** — layers stacked inside a `<Pitch>`, one page per visual, each with a live
  example: [Scatter](/docs/overlays/scatter), [Arrows](/docs/overlays/arrows),
  [Comet](/docs/overlays/comet), [Annotate](/docs/overlays/annotate),
  [Heatmap](/docs/overlays/heatmap), [Flow](/docs/overlays/flow),
  [Polygon](/docs/overlays/polygon), [Convex Hull](/docs/overlays/convex-hull),
  [Voronoi](/docs/overlays/voronoi), and [Goal Angle](/docs/overlays/goal-angle).
* **[Agents](/docs/agents)** — building with AI: `llms.txt`, and the
  [Agent Skill](/docs/agents/skills) that ships inside `@pitchkit/react`.
* **[Styling](/docs/styling/theming)** — [theming](/docs/styling/theming) with CSS variables,
  [Tailwind](/docs/styling/tailwind) utilities, and [pitch palettes](/docs/styling/palettes).
* **[Data](/docs/data)** — loading real open football data in one call with the optional
  `@pitchkit/data-providers` package: StatsBomb
  [events](/docs/data/statsbomb/events) and [360 tracking](/docs/data/statsbomb/360),
  SkillCorner [tracking](/docs/data/skillcorner/tracking), and
  [Wyscout events](/docs/data/wyscout/events) — every provider page with a live example
  fetching a real match.
* **[mplsoccer → PitchKit](/docs/migration)** — the migration cheatsheet.
* **[API Reference](/docs/api)** — every public export, generated from TSDoc.
* **[Gallery](/gallery)** — finished visualisations with full source and sandbox exports.

## Reading these docs with an AI agent

No model has PitchKit in its training data, so anything an agent "remembers" about the API
is invented. Three ways to give it the real thing, cheapest first:

* **[`/llms.txt`](https://www.pitchkitjs.com/llms.txt)** — an index of every page on this site,
  in the [llms.txt](https://llmstxt.org) format. Paste the URL into a prompt.
* **[`/llms-full.txt`](https://www.pitchkitjs.com/llms-full.txt)** — every guide, component and
  overlay page as one Markdown document, examples inlined. Small enough to hand over whole.
  The generated API reference is kept separate as
  [`/llms-api.txt`](https://www.pitchkitjs.com/llms-api.txt) so it doesn't crowd out the prose.
* **[The Agent Skill](/docs/agents/skills)** — the best option if you're already
  installing the package, because it's versioned with the code rather than scraped from here.

Any page on this site is also available as raw Markdown: append `.md` to its URL
(for example [`/docs/styling/theming.md`](/docs/styling/theming.md)).