Nhatcapdang
Tabs

Transition Panel

A transition panel component that smoothly animates between different content states with customizable transitions and variants.

Tabs with Transition Panel

Card with Transition Panel

Installation

npx shadcn@latest add @nhatcapdang/transition-panel
yarn dlx shadcn@latest add @nhatcapdang/transition-panel
pnpm dlx shadcn@latest add @nhatcapdang/transition-panel

Props

PropTypeDefaultDescription
childrenReact.ReactNode[]-Array of React nodes to render as panel content
activeIndexnumber-Index of the currently active child to display
classNamestring-Additional CSS classes for the container
transitionTransition-Framer Motion transition configuration
variants{ enter: Variant; center: Variant; exit: Variant }-Custom animation variants for enter, center, and exit states

On this page