docs/utilities/presence
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Animate components on mount and unmount.
PreviewCode
Toggle
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/presence
import React from "react";
import { Presence } from "@/registry/react/components/presence";
const [visible, setVisible] = React.useState(false);
<Presence present={visible}>
Content that animates in and out
</Presence>
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 {...}>
</Presence>
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" />
| 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.
[
Previous page
JSON Tree View ](/docs/utilities/json-tree-view)[
Next page
Show ](/docs/utilities/show)
On This Page