Pitch

<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.

"use client";import { Pitch } from "@pitchkit/react";import { docsAppearance } from "./docs-appearance";/** Bare pitch, no marks — responsive by default (fills its container). */export function PitchBasic() {  return <Pitch type="statsbomb" appearance={docsAppearance} />;}

Vertical orientation

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

"use client";import { VerticalPitch } from "@pitchkit/react";import { docsAppearance } from "./docs-appearance";/** Same pitch, vertical orientation — useful for shot maps and attacking-third views. */export function VerticalPitchBasic() {  return <VerticalPitch type="statsbomb" appearance={docsAppearance} />;}

Appearance

Colours are CSS variables (--pitch-surface, --pitch-stripe, --pitch-lines, --pitch-marker-primary) — set them once per theme, no per-instance props needed. See Configuration > Tailwind for the full variable reference and how to reach them with Tailwind utilities. stripes and goalType are the two structural knobs, passed via the appearance prop:

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