Transition

Smooth page transitions with curved or slide effects.

Smooth transitions,
zero effort.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/transition.json 

Usage

import Transition from "@/components/ui/transition";
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <Transition
      intro={
        <div className="text-center text-white dark:text-black">
          <h1 className="text-3xl font-bold">Welcome!</h1>
        </div>
      }
      introDuration={2}
      transitionDuration={1}
      type="curved"
      direction="bottom"
    >
      {children}
    </Transition>
  );
}

Examples


Curve

Top

Smooth transitions,
zero effort.


Left

Smooth transitions,
zero effort.


Right

Smooth transitions,
zero effort.


Slide

Top

Smooth transitions,
zero effort.


Bottom

Smooth transitions,
zero effort.


Left

Smooth transitions,
zero effort.


Right

Smooth transitions,
zero effort.


Trigger

Smooth transitions,
zero effort.

API Reference

Transition

Smooth page transitions with curved or slide effects.

Props

PropertyTypeDefaultDescription
introReactNode | (triggerExit: () => void) => ReactNoderequired
Content or function shown during the intro animation.
childrenReactNoderequired
Main content displayed after the intro transition completes.
introDurationnumber1.5
Duration in seconds for which the intro is displayed.
transitionDurationnumber0.9
Time in seconds for the transition animation to complete.
type'curved' | 'slide'curved
Transition style: curved clipping or sliding effect.
direction'top' | 'bottom' | 'left' | 'right'bottom
Direction from which the transition occurs.
classNamestring-
CSS classes applied to the overlay element.
skipboolean
If true, skips the intro animation and immediately shows content.
autoExitboolean
If true, automatically starts exit transition after introDuration.
triggerboolean-
Optional external trigger to start the transition manually.
onFinished() => void-
Callback fired when the transition completes.

Built withby Ahdeetai.