Portal

Overview

Moves content into document.body or another host element while keeping inline rendering available as an explicit opt-out.

Usage

<script lang="ts">
  import Portal from '@lostgradient/cinder/portal';
</script>

<Portal>
  <div>Portaled content</div>
</Portal>

target accepts either a selector string or an HTMLElement. If a selector cannot be resolved after hydration, Portal keeps its children inline and warns in development.

Live preview

When to use

Use when

Rendering an overlay or floating surface outside the current stacking or overflow context.
Building a custom anchored or modal primitive that needs to append content into document.body or a named host.

Avoid when

The content should stay in normal document flow or inherit layout from its original parent.

Examples

Basic portal

Renders a floating surface through document.body while leaving the trigger inline.

Props

Props for portal
Name	Type	Default	Required
`target`	`PortalTargetInput`	`null`
`disabled`	`boolean`	`false`
`inheritAttributes`	`boolean`	`true`
`children`	`snippet`		req