51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:Tf02,'use client'; import React, { useState } from 'react'; import { AnimatePresence, Transition, Variant, motion, MotionProps, } from 'motion/react'; import { cn } from '@/lib/utils'; type TransitionPanelProps = { children: React.ReactNode[]; className?: string; transition?: Transition; activeIndex: number; variants?: { enter: Variant; center: Variant; exit: Variant }; } & MotionProps; function TransitionPanel({ children, className, transition, variants, activeIndex, ...motionProps }: TransitionPanelProps) { return (

{children[activeIndex]}

); } const ITEMS = [ { title: 'AI Table Builder', subtitle: 'Transforming Data into Insights', content: 'Quickly generate interactive tables powered by AI. Import data, auto-format columns, and enable features like sorting, filtering, and pagination without writing manual code. Perfect for dashboards, admin panels, and data-heavy applications.', }, { title: 'AI Form Builder', subtitle: 'Streamlined Form Creation', content: 'Design complex forms effortlessly with AI. From simple contact forms to multi-step onboarding flows, the builder handles validation, conditional logic, and responsive layouts — helping you collect accurate data faster.', }, { title: 'AI Chart Builder', subtitle: 'Visualizing Data Intelligently', content: 'Turn raw numbers into beautiful, interactive charts with AI assistance. Choose from line, bar, pie, or advanced visualizations, and let the builder suggest the best chart type for your dataset to highlight key insights instantly.', }, ]; export default function TransitionTabMotion() { const [activeIndex, setActiveIndex] = useState(0); return (

{/* Tabs */}

{ITEMS.map(({ title }, index) => { const isActive = activeIndex === index; return ( ); })}

{/* Transition Content */}

{ITEMS.map(({ subtitle, content }, index) => (

{subtitle}

{content}

))}

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion/react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://tailwind-admin.com/r/transition-tab-motion.json","proxyUrl":"https://shadcnregistry.com/r/tailwind-admin/transition-tab-motion","itemId":"@tailwind-admin/transition-tab-motion"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"src/app/components/animatedComponents/tabs/transition-tab/TransitionTabMotion.tsx","content":"$54","type":"registry:component","target":"components/animated/tabs/transition-tab/TransitionTabMotion.tsx"}]}]]}],"$L55"]}]

Transition Tab Motion

Installation

Files

components

Styles