Skip to main content
Built-in Elements

<courtyardoutline />

Overview

Use <courtyardoutline /> when your footprint needs a non-rectangular, non-circular courtyard shape.

Basic Outline Example

export default () => (
<board width="30mm" height="24mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-4} pcbY={-2.5} outerDiameter={2.2} holeDiameter={1.1} />
<platedhole shape="circle" pcbX={-4} pcbY={2.5} outerDiameter={2.2} holeDiameter={1.1} />
<platedhole shape="circle" pcbX={4} pcbY={-2.5} outerDiameter={2.2} holeDiameter={1.1} />
<platedhole shape="circle" pcbX={4} pcbY={2.5} outerDiameter={2.2} holeDiameter={1.1} />
<courtyardoutline
outline={[
{ x: -6, y: -5 },
{ x: 6, y: -5 },
{ x: 6, y: 5 },
{ x: 0, y: 7 },
{ x: -6, y: 5 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Filled Outline Example

export default () => (
<board width="28mm" height="22mm">
<chip
name="ANT1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={0} pcbY={-3} outerDiameter={2.2} holeDiameter={1.1} />
<courtyardoutline
outline={[
{ x: -7, y: -5 },
{ x: 7, y: -5 },
{ x: 7, y: 4 },
{ x: 0, y: 7 },
{ x: -7, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Anchor Alignment

The anchorAlignment prop controls how the courtyard outline is positioned relative to its anchor point. This is useful when you need to align the courtyard with a specific corner or edge of the component.

Center (default)

export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
anchorAlignment="center"
outline={[
{ x: -4, y: -4 },
{ x: 4, y: -4 },
{ x: 4, y: 4 },
{ x: -4, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Top Left

export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
anchorAlignment="top_left"
outline={[
{ x: -4, y: -4 },
{ x: 4, y: -4 },
{ x: 4, y: 4 },
{ x: -4, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Top Right

export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
anchorAlignment="top_right"
outline={[
{ x: -4, y: -4 },
{ x: 4, y: -4 },
{ x: 4, y: 4 },
{ x: -4, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Bottom Left

export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
anchorAlignment="bottom_left"
outline={[
{ x: -4, y: -4 },
{ x: 4, y: -4 },
{ x: 4, y: 4 },
{ x: -4, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Bottom Right

export default () => (
<board width="20mm" height="20mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={2} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
anchorAlignment="bottom_right"
outline={[
{ x: -4, y: -4 },
{ x: 4, y: -4 },
{ x: 4, y: 4 },
{ x: -4, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Irregular Polygon Courtyard

For components with non-rectangular outlines (e.g., L-shaped packages), use a multi-point outline to follow the package contour:

export default () => (
<board width="30mm" height="24mm">
<chip
name="U1"
footprint={
<footprint>
<platedhole shape="circle" pcbX={-3} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={1} pcbY={-2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={-3} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<platedhole shape="circle" pcbX={1} pcbY={2} outerDiameter={1.6} holeDiameter={0.8} />
<courtyardoutline
outline={[
{ x: -5, y: -4 },
{ x: 3, y: -4 },
{ x: 3, y: 0 },
{ x: 5, y: 0 },
{ x: 5, y: 4 },
{ x: -5, y: 4 },
]}
/>
</footprint>
}
/>
</board>
)
PCB Circuit Preview

Props

PropTypeDescription
outline{ x: number, y: number }[]Array of points defining the courtyard polygon. Coordinates are relative to the component origin.
anchorAlignment"center" | "top_left" | "top_right" | "bottom_left" | "bottom_right"Controls how the courtyard is positioned relative to its anchor point. Defaults to "center".

Tips

  • Use anchorAlignment to offset the courtyard toward a specific corner when placing components near board edges
  • For irregular packages (e.g., L-shaped), add more outline points to follow the contour closely
  • Courtyard outlines are shown in the PCB view and exported to Gerber files for assembly reference