# Overlay

```ts
import { Overlay, Rectangle, Text } from "@pibbl/core";
```

`Overlay` uses [`OverlayProps`](/reference/types/elements-components/#overlayprops) and [`OverlayStyle`](/reference/types/layout/#overlaystyle) to allocate recursive direct
children against one declared box. Source order remains paint order, so later
children appear over earlier children. It performs no drawing-command retention
or implicit intrinsic measurement.

```tsx
<Overlay style={{ width: 180, height: 100 }}>
  <Rectangle style={{ width: 180, height: 100, fill: "#1d4ed8" }} />
  <Text style={{ left: 18, top: 58, fill: "white", font: "20px sans-serif" }}>
    Overlay
  </Text>
</Overlay>
```

See the [Absolute and Overlay live example](/playground/#/examples/layout/absolute-and-overlay).

## API details from source

<span id="api-Overlay"></span>

Describes overlay layout for JSX or createElement authoring.

```ts
Overlay: PibblPrimitiveComponent<OverlayProps, PrimitiveInput<OverlayProps, OverlayStyle>>
```

Related API: [Overlay](/reference/components/overlay/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [OverlayProps](/reference/types/elements-components/#overlayprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [OverlayStyle](/reference/types/layout/#overlaystyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[OverlayProps](/reference/types/elements-components/#overlayprops)

[OverlayStyle](/reference/types/layout/#overlaystyle)

[View source — packages/core/src/lib/layout/overlay.ts:110](/source/packages/core/src/lib/layout/overlay-ts/#L110)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Absolute and overlay layout](/minimal-examples/layout/absolute-overlay/): Position a block absolutely and center content within an overlay. [Plain source](/minimal/layout/absolute-overlay.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.