# Overlay layer

Kit v2: the full-viewport fixed layer real pages mount sheets, dialogs, guards and the help drawer into, so they cover the whole window instead of a specimen stage. The React build gets this from Radix Portal.

- **Group:** Overlays · **family:** `page-primitives` · **shadcn:** composed
- **Build:** Radix `Portal` (built into Dialog / Sheet / Popover).
- **In apps/admin today:** Comes with every Radix overlay.
- **Client component:** yes. 

## Content rules

- None; structural.

## Do

- Portal every overlay to the body.

## Don't

- Render overlays inside a `overflow:hidden` or transformed parent.

## Accessibility

- **Keyboard:** Escape closes the top layer and returns focus to the opener.
- **Keyboard:** Tab and Shift+Tab cycle inside the open layer only.
- **ARIA:** Background gets `inert` (Radix sets `aria-hidden` on siblings).
- **Focus:** Opening moves focus inside (`[data-k-autofocus]` first, else the first field); closing returns it to the opener.

## Tokens

`--z-scrim` `--sidebar-w` `--topbar-h`

## Files

`overlay-layer.html` live specimen · `overlay-layer.css` kit rules · `overlay-layer.d.ts` props · full page: `docs/components/overlay-layer/` (phone: `m/`).