# Arrows

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

> Draw a directional pass or carry map between two points.

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

// StatsBomb coordinates (120 x 80).
const passes = [
  { from: { x: 12, y: 40 }, to: { x: 30, y: 12 } },
  { from: { x: 30, y: 12 }, to: { x: 55, y: 40 } },
  { from: { x: 55, y: 40 }, to: { x: 85, y: 15 } },
  { from: { x: 85, y: 15 }, to: { x: 95, y: 40 } },
];

/** `<Arrows>` draws a directional pass/carry map from `x,y` to `x2,y2`. */
export function ArrowsBasic() {
  return (
    <Pitch type="statsbomb">
      <Arrows
        data={passes}
        x={(p) => p.from.x}
        y={(p) => p.from.y}
        x2={(p) => p.to.x}
        y2={(p) => p.to.y}
        strokeWidth={2}
        strokeOpacity={0.85}
      />
    </Pitch>
  );
}
```

## Usage

`<Arrows>` takes `x`/`y` (start) and `x2`/`y2` (end) accessors per datum — good for pass maps
and set-piece routines.

```tsx
<Arrows data={passes} x={(p) => p.from.x} y={(p) => p.from.y} x2={(p) => p.to.x} y2={(p) => p.to.y} />
```