FeedbackGenerated from the public API
TransitionPanel
Swap between panels while keeping the container's size stable.
@luc/ui/motionLive preview
The active panel is an identity, and the direction is a prop — a wizard that never collapses its slot.
Step one: choose a universe.
Step two: choose a schedule.
Step three: confirm.
<TransitionPanel activeIndex={index} mode="overlay">
<Card variant="outline">Step one</Card>
<Card variant="outline">Step two</Card>
</TransitionPanel>Usage
import { TransitionPanel } from "@luc/ui/motion";<TransitionPanel activeIndex={index} mode="overlay">
<Card variant="outline">Step one</Card>
<Card variant="outline">Step two</Card>
</TransitionPanel>API
| Export | Kind | Signature |
|---|---|---|
TransitionPanel | 5 documented props | ({ className, activeIndex, direction, mode, blur, children, ...props }: TransitionPanelProps) => import("@types/react").JSX.Element |
TransitionPanel props
Type: TransitionPanelProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
activeIndex | string | number | — | Identity of the showing panel. Changing it animates the swap. |
blur? | boolean | undefined | — | Add a small blur so the swap reads as depth rather than a hard cut. |
children | ReactNode | — | |
direction? | 1 | -1 | undefined | — | `1` for forward, `-1` for back. Drives the travel direction. |
mode? | "swap" | "overlay" | undefined | — | `overlay` (default) crossfades with the outgoing panel lifted out of flow, so the slot never collapses mid-swap. `swap` waits for the exit instead — use it when two panels must ne… |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related