Presence for React Aria

Animate components on mount and unmount.

React Aria does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Presence } from "@/components/ui/presence";

const PresenceDemo = () => {
  const [present, setPresent] = React.useState(false);

  return (
    <div className="relative">
      <Button
        clickEffect={false}
        onClick={() => setPresent(!present)}
        variant="outline"
      >
        Toggle
      </Button>
      <Presence asChild present={present}>
        <div
          className={cn(
            "absolute bottom-full left-1/2 mb-2 -translate-x-1/2",
            "px-4 py-2",
            "bg-muted",
            "text-sm",
            "rounded-md border",
            "origin-bottom",
            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:slide-out-to-bottom-5 data-[state=closed]:animate-out",
            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:slide-in-from-bottom-5 data-[state=open]:animate-in"
          )}
        >
          Content
        </div>
      </Presence>
    </div>
  );
};

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

API Reference

Presence

data-slot="presence"

PropType

hideMode?"display-none" | "activity"

How to hide content when mounted but not present. - display-none: HTML hidden attribute. Effects stay alive. - activity: React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.

Type: "display-none" | "activity"
Default: "display-none"

immediate?boolean

Whether to synchronize the present change immediately or defer it to the next frame.

lazyMount?boolean

Whether to enable lazy mounting. Ark default: false.

Default: true

onEnterComplete?VoidFunction

Function called when the animation ends in the open state.

onExitComplete?VoidFunction

Function called when the animation ends in the closed state.

present?boolean

Whether the node is present (controlled by the user).

skipAnimationOnMount?boolean

Whether to allow the initial presence animation.

Default: false

unmountOnExit?boolean

Whether to unmount on exit. Ark default: false.

Default: true

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.