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
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`present`		`string` Whether the element is present
`asChild`		`Snippet` Render a different element.

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