║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Transition Panel - Motion-Primitives', description: "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. Built for React, Next.js, and Tailwind CSS.", };

import { TabsTransitionPanel } from './transition-panel-tabs'; import { TransitionPanelCard } from './transition-panel-card'; import ComponentCodePreview from '@/components/website/component-code-preview'; import CodeBlock from '@/components/website/code-block';

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

<ComponentCodePreview classNameComponentContainer='p-20' component={<TabsTransitionPanel />} filePath='app/docs/transition-panel/transition-panel-tabs.tsx' />

Card with Transition Panel

<ComponentCodePreview classNameComponentContainer='p-4' component={<TransitionPanelCard />} filePath='app/docs/transition-panel/transition-panel-card.tsx' />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='transition-panel' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/transition-panel.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

| Prop | Type | Default | 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. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║