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.