# Presence

> Mounts and unmounts content with a real entrance and exit through one direction-aware transition, tracking opening/open/closing state, marking the panel inert while it closes, and firing lifecycle callbacks.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Effects
- Tags: animation, presence, transition, mount, exit, micro-interaction
- Types: `PresenceProps`
- Docs: https://fancy-ui.rama.app/docs/components/presence
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/presence

## Import

```tsx
import { Presence } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` (required) | `boolean` | — | Whether the content is mounted and, once the entrance settles, visible |
| `preset` | `"fade" \| "fade-up" \| "fade-down" \| "fade-left" \| "fade-right" \| "scale" \| "blur" \| "zoom"` | `"fade"` | The entrance/exit look |
| `duration` | `number` | `300` | Entrance duration in ms |
| `exitDuration` | `number` | `200` | Exit duration in ms — shorter than the entrance by default; leaving reads faster than arriving |
| `delay` | `number` | `0` | Delay in ms before the entrance starts; applied to the exit too |
| `distance` | `number` | `16` | Entrance travel distance in px for the four directional presets — the exit travels half as far |
| `inert` | `boolean` | `true` | Whether the panel is inert while closing (Svelte already does this natively for any transitioning element — false is an explicit opt-out) |
| `onEnterEnd` | `() => void` | — | Fires once the entrance transition settles (onintroend) |
| `onExitEnd` | `() => void` | — | Fires once the exit transition settles (onoutroend) — not guaranteed if the component is destroyed mid-exit |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes, merged onto the root |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the root element — null while closed |

## Node props

| Prop | Description |
| --- | --- |
| `children` | Panel content |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/presence.md.