{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tab",
  "type": "registry:component",
  "title": "Animated Tab",
  "author": "Toby Belhome",
  "description": "An animated tab is a ui component that switches between content panels with smooth animated transitions.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/animated-tab.json",
    "button"
  ],
  "files": [
    {
      "path": "examples/motion/components/animated-tab/01/animated-tab.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ntype AnimatedTab = {\n  name: string;\n  content: React.ReactNode | string;\n};\n\nexport function AnimatedTab({ tabs }: { tabs: AnimatedTab[] }) {\n  const [selected, setSelected] = useState(0);\n  const duration = 0.3;\n\n  const handleSelect = (index: number) => {\n    setSelected(index);\n  };\n\n  return (\n    <div className=\"mx-auto w-full max-w-md\">\n      {/* Tab Buttons */}\n      <div className=\"relative mb-4 flex\">\n        {tabs.map(({ name }, i) => (\n          <motion.div\n            key={i}\n            className=\"relative cursor-pointer px-4 py-1\"\n            transition={{ duration }}\n            onClick={() => handleSelect(i)}>\n            <span className=\"relative z-10\">{name}</span>\n\n            {i === selected && (\n              <motion.div\n                className=\"bg-muted absolute top-0 left-0 h-full w-full rounded-xl\"\n                layoutId=\"selected\"\n                transition={{ duration }}\n              />\n            )}\n          </motion.div>\n        ))}\n      </div>\n\n      {/* Tab Content */}\n      <div className=\"relative h-32\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={selected}\n            className=\"bg-muted absolute inset-0 rounded-xl p-4\"\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.3 }}>\n            {tabs[selected].content}\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/animated-tab/animated-tab.tsx"
    },
    {
      "path": "examples/motion/components/animated-tab/01/page.tsx",
      "content": "import { AnimatedTab } from \"./animated-tab\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function AnimatedTabExample() {\n  return (\n    <AnimatedTab\n      tabs={[\n        {\n          name: \"Overview\",\n          content: \"This is the overview tab content.\"\n        },\n        {\n          name: \"Reviews\",\n          content: (\n            <div>\n              <p>This is the reviews tab content.</p>\n              <Button>Go it!</Button>\n            </div>\n          )\n        },\n        {\n          name: \"Details\",\n          content: \"This is the details tab content.\"\n        },\n        {\n          name: \"Feedback\",\n          content: \"This is the feedback tab content.\"\n        }\n      ]}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/animated-tab/animated-tab-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}