design-infraReport a problem or share feedback← Catalog
Transition Panel
curatedtheme-awarefreemotion-primitives/transition-panel
A panel component with smooth transitions between different states.
$
npx shadcn@latest add @motion-primitives/transition-panelnpm deps: motion
Our notes
Animated content swap between tab panels/steps (AnimatePresence wrapper). Colourless.- Source
- Motion Primitives
- Kind
- component
- Categories
- transition
- Use as
- wrapper — wraps your existing element
- Applies to
- tabscardform
- Motion
- on state · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Motion presetsoc/motion-presetsdesign-infra's motion languages (still / quiet / lively / cinematic) as motion/react transitions, springs and variants (fadeUp, scaleIn, stagger, press, lift). Set PROJECT_MOTION to your DESIGN.md `motion:` so hand-written animations match the system.
- Animated Groupmotion-primitives/animated-groupStagger a group of children with presets (fade, blur, slide, zoom…). Colourless; good for feature lists and logo rows.
- In Viewmotion-primitives/in-viewAnimate children when they enter the viewport — thin, reusable wrapper. Colourless.