shadcn.io is not affiliated with official shadcn/ui

Shadcn Presence for React and Tailwind

Animate components on mount and unmount.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/presence.json

pnpm dlx shadcn@latest add https://kit.dev/r/presence.json

npx shadcn@latest add https://kit.dev/r/presence.json

yarn shadcn@latest add https://kit.dev/r/presence.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/presence.tsx

"use client";

import { Presence as ArkPresence } from "@ark-ui/react/presence";
import type React from "react";

export const Presence = (props: React.ComponentProps<typeof ArkPresence>) => {
  const { lazyMount = true, unmountOnExit = true, ...rest } = props;

  return (
    <ArkPresence
      data-slot="presence"
      lazyMount={lazyMount}
      unmountOnExit={unmountOnExit}
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

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>

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>

States

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.

JSON Tree View

Show