# Transition
- **Category:** Utilities (`utilities`)
- **Slug:** `utilities/transition`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Transition } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/utilities/transition
> A mount/unmount transition primitive: keeps children mounted through an exit tween, then removes them.
## When to use it
**Transition** is the low-level primitive the library's own overlays are built on. Reach for it when you need to animate something *in and out* of the tree — the exit animation is the hard part, since a naive conditional render rips the element out before it can animate.
It is a headless render-prop: it computes an inline `style` (opacity + transform + the timing) and the current `status`, and you decide what element to put them on. That keeps it composable onto any node without an extra wrapper. For a ready-made loading scrim, use [LoadingOverlay](/feedback/loading-overlay); for portalled surfaces with focus management, prefer [Popover](/overlay/popover) or [Dialog](/overlay/dialog), which handle transitions internally.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `(style: CSSProperties, status: TransitionStatus) => ReactNode` | yes | — | Render-prop: receives the inline `style` to spread onto your own element, plus the current transition `status`. Return a single element. |
| `duration` | `number` | no | `200` | Animation duration in ms (exit reuses it unless `exitDuration` is set). |
| `exitDuration` | `number` | no | — | Optional distinct exit duration in ms. Falls back to `duration`. |
| `mounted` | `boolean` | yes | — | When `true` the child is mounted and animated in; when `false` it animates out and unmounts. |
| `onEntered` | `(() => void)` | no | — | Called after the enter animation completes. |
| `onExited` | `(() => void)` | no | — | Called after the exit animation completes and the child has unmounted. |
| `timingFunction` | `string` | no | `var(--pds-ease)` | CSS timing function for the tween. |
| `transition` | `enum` | no | `fade` | Named enter/exit preset. |
## Examples
### Basics
Toggle `mounted` and the child fades in; toggle it off and the child stays mounted through the fade-out, then unmounts. The render-prop hands you a `style` object to spread onto your element.
```tsx
import { useState } from "react";
import { Transition, Button, Stack, Card, Text } from "@protocore/pds";
export default function Basics() {
const [mounted, setMounted] = useState(false);
return (
{(style) => (
Block #4,812,004 finalised — 1,204 transactions.
)}
);
}
```
### Presets
Five named presets — `fade`, `slide-up`, `slide-down`, `scale`, and `pop` — each defining an enter/exit opacity and transform. Tune `duration` and `timingFunction` per instance.
```tsx
import { useState } from "react";
import {
Transition,
type TransitionPreset,
Button,
SegmentedControl,
Stack,
Card,
Text,
} from "@protocore/pds";
const PRESETS: TransitionPreset[] = ["fade", "slide-up", "slide-down", "scale", "pop"];
export default function Presets() {
const [preset, setPreset] = useState("slide-up");
const [mounted, setMounted] = useState(true);
return (
setPreset(v as TransitionPreset)}
items={PRESETS.map((p) => ({ value: p, label: p }))}
/>
{(style) => (
Validator 0x8f…c2 rotated its signing key.
)}