Presence

Animate components on mount and unmount.

Installation


pnpm add @ark-ui/react.json

Usage


import React from "react";
import { Presence } from "@/components/ui/presence";
 
const [visible, setVisible] = React.useState(false);
 
<Presence present={visible}>
  Content that animates in and out
</Presence>

Lazy

Setting lazyMount and unmountOnExit to true lazy mounts and unmounts the content.

It will remove the element from the DOM when it is not present.


<Presence lazyMount unmountOnExit {...}>
  {/** content */}
</Presence>

State

Presence automatically manages the attribute data-state to open and closed. This enables styling and animations based on visibility state.


<Presence present={true} /> // <div data-state="open" />
<Presence present={false} /> // <div data-state="closed" />

API Reference

Presence

Prop	Type	Default
`present`	`boolean`	`false`
`unmountOnExit`	`boolean`	`true`
`lazyMount`	`boolean`	`true`
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Lazy State API Reference Presence