◇

Presence

1 parts

Controls the mount/unmount lifecycle of a single child while respecting CSS enter/leave animations, keeping it in the DOM until any exit animation has finished. Use it as the foundation for show/hide parts (dialog content, tooltips, collapsible panels) so they animate out before being removed, rather than disappearing instantly when their present state flips to false. Presence is a headless building block: it renders its child via Slot (merging attributes onto it), wires up animation tracking, and exposes the resolved presence to the default slot so children can reflect it (e.g. as a data-state). The same logic is available standalone through usePresence.

Source

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  Presence,
} from '@robonen/primitives/utilities/presence';

<Presence />

API Reference

Presence

Root

Controls the mount/unmount lifecycle of a single child while respecting CSS enter/leave animations, keeping it in the DOM until any exit animation has finished. Use it as the foundation for show/hide parts (dialog content, tooltips, collapsible panels) so they animate out before being removed, rather than disappearing instantly when their `present` state flips to false. `Presence` is a headless building block: it renders its child via `Slot` (merging attributes onto it), wires up animation tracking, and exposes the resolved presence to the default slot so children can reflect it (e.g. as a `data-state`). The same logic is available standalone through `usePresence`.

Prop	Type	Default	Description
`present`	`boolean`	—	Whether the child should be present. While `false`, the child stays mounted until any leave animation completes.
`forceMount`?	`boolean`	—	Keep the child mounted regardless of `present` (useful for animation control or measuring while hidden).