Primitive · CLI
Transition Panel
Wait-mode content swaps for feature tabs and docs panels — opacity + small y.
Preview
npx shadcn@latest add @atroui/transition-panelOverview
Discrete panel swap
Exit finishes before enter — wait mode for feature tabs.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/transition-panelSource lands in your repo. Installation · Registry
Usage
Prefer
mode="wait" (built-in) for discrete tabs so panels never overlap. Crossfade sync only when heights must share space — not the default here.tsx
import { TransitionPanel } from "@/components/ui/transition-panel"
<TransitionPanel activeKey={tab}>
{{ overview: <Overview />, details: <Details /> }}
</TransitionPanel>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| activeKey | string | - | Which panel is shown. Changes remount the keyed motion child. |
| children | Record<string, ReactNode> | (key) => ReactNode | - | Map of panels or a render prop for the active key. |
| className | string | - | Optional class on the outer wrapper. |
| y | number | 8 | Enter y travel in px. Exit uses half height upward. |
Transition Panel