Transition Panel

Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.

Examples

Tabs with Transition Panel

Refining visual harmony

Learn the principles of motion aesthetics that make an interface feel considered. Balance timing, easing and the flow of motion so every change reads as one gesture.

Card with Transition Panel

Brand

Develop a distinctive brand identity with tailored logos and guidelines to ensure consistent messaging across all platforms.

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-transition-panel.json

Component API

Prop	Type	Description
children	React.ReactNode[]	The content that the panel will transition through.
className	string	Optional CSS class to apply to the panel container for additional styling.
transition	Transition	The transition settings from motion to control the animation effects.
activeIndex	number	The index of the currently active child element to display.
variants	Object (with enter, center, exit properties)	Variants for each animation state (enter, center, exit) to customize animations.
...motionProps	MotionProps	Spread all additional motion props to the motion.div component.