Presence

A component that controls content rendering and unmounting based on state.

Usage

<script>
  import {Presence} from 'ui-ingredients';

  let present = $state(false);
</script>

<button
  onclick={() => {
    present = !present;
  }}
>
  Toggle
</button>

<Presence {present} lazyMount keepMounted>Content</Presence>

API Reference

Root

Prop	Default	Description
`animateOnMount`	`true`	`boolean` Whether to run the enter animation when the component mounts.
`keepMounted`	`true`	`boolean` Whether to keep the component mounted after exit.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting.
`onExitComplete`		`() => void` Callback that fires when the exit animation of the dialog completes.
`present`		`string` Whether the element is present
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-state`	"open" \| "closed"