# BodyEnd

**When to use:** Renders children through a React portal, to the end of the app. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.

**Keywords:** teleport

**Import:** `import { BodyEnd } from '@ahrowe/ui'`

**Setup:** none inside [AhroweProvider](AhroweProvider.md), which renders the element BodyEnd portals into. Without it, BodyEnd looks for an element with `id="bodyEnd"`: put `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider`, as the last child, so portalled content inherits the theme.

```tsx
import { BodyEnd } from '@ahrowe/ui';

<BodyEnd>
  <div className="toast">Saved!</div>
</BodyEnd>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Content rendered at the end of the app |

**Note:** Outside `AhroweProvider` and without a `#bodyEnd`, it renders nothing and logs an error in development.

**Theming crosses the portal.** Children keep the variables of the nearest `ThemeProvider` they were *written* under, not the one that happens to wrap the element it portals into. BodyEnd applies them through a `display: contents` wrapper, which generates no box — positioning, stacking and clipping are unchanged — while custom properties still inherit. Variables that theme leaves unset fall through to whatever wraps that element, the same cascade the children would have seen rendered in place. With no `ThemeProvider` above, no wrapper is added at all.