# Pitch

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

> The root component — owns the coordinate system and is responsive by default.

`<Pitch>` renders the pitch surface and markings, and provides the coordinate transform every
layer component reads from context. It's responsive by default (fills its container via
`ResizeObserver`); pass explicit `width`/`height` to opt out — required for `<Heatmap>`, which
paints to a `<canvas>` with no server-rendered content to size against.

```tsx
import { Pitch } from "@pitchkit/react";

/** Bare pitch, no marks — responsive by default (fills its container). */
export function PitchBasic() {
  return <Pitch type="statsbomb" />;
}
```

## Vertical orientation

`<VerticalPitch>` is `<Pitch orientation="vertical">` under a friendlier name (matching
mplsoccer's `VerticalPitch`) — useful for shot maps and attacking-third views.

```tsx
import { VerticalPitch } from "@pitchkit/react";

/** Same pitch, vertical orientation — useful for shot maps and attacking-third views. */
export function VerticalPitchBasic() {
  return <VerticalPitch type="statsbomb" />;
}
```

## Appearance

Colours are CSS variables (`--pitch-surface`, `--pitch-stripe`, `--pitch-lines` and others) —
set them once per theme, no per-instance props needed. See
[Styling → Theming](/docs/styling/theming) for the full list and
[Styling → Tailwind](/docs/styling/tailwind) for setting them with Tailwind utilities. `stripes`, `goalType` and `linesOnTop` are the
structural knobs, passed via the `appearance` prop:

```tsx
<Pitch type="statsbomb" appearance={{ stripes: true, goalType: "box" }} />
```

| Key          | Does                                                                                   |
| ------------ | -------------------------------------------------------------------------------------- |
| `stripes`    | `true` for a sensible default count, or a number for exactly that many mown bands      |
| `goalType`   | `"line"` (default) or `"box"`                                                          |
| `linesOnTop` | Paints the markings above the layers instead of below them — mplsoccer's `line_zorder` |

`linesOnTop` is off by default so discrete marks sit on top of the lines. Turn it on for the
density layers ([`<Heatmap>`](/docs/overlays/heatmap),
[`<PositionalHeatmap>`](/docs/overlays/positional-heatmap), [`<Hexbin>`](/docs/overlays/hexbin),
[`<KDE>`](/docs/overlays/kde)), whose fills otherwise cover the markings underneath them. Only the
markings move — the grass surface and stripes always stay at the bottom.