{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-highlight-tabs-hover-parent-demo",
  "type": "registry:ui",
  "title": "Motion Highlight Tabs Hover Parent Demo",
  "description": "Demo showing the motion highlight tabs hover effect.",
  "registryDependencies": [
    "https://animate-ui.com/r/motion-highlight"
  ],
  "files": [
    {
      "path": "registry/demo/effects/motion-highlight-tabs-hover-parent/index.tsx",
      "content": "import { MotionHighlight } from '@/components/animate-ui/effects/motion-highlight';\n\nconst TABS = [\n  {\n    value: 'tab-1',\n    title: 'Tab 1',\n    description: 'Tab 1 description',\n  },\n  {\n    value: 'tab-2',\n    title: 'Tab 2',\n    description: 'Tab 2 description',\n  },\n  {\n    value: 'tab-3',\n    title: 'Tab 3',\n    description: 'Tab 3 description',\n  },\n];\n\nexport const MotionHighlightTabsHoverParentDemo = () => {\n  return (\n    <MotionHighlight\n      hover\n      mode=\"parent\"\n      containerClassName=\"flex border rounded-full p-1\"\n      className=\"rounded-full\"\n      boundsOffset={{ top: -1, left: -1 }} // we have to add an offset of the same size as the border when we set a border\n    >\n      {TABS.map((tab) => (\n        <div\n          key={tab.value}\n          data-value={tab.value}\n          className=\"px-3 h-8 flex items-center cursor-pointer justify-center rounded-full text-sm data-[active=true]:text-current data-[active=true]:font-medium text-muted-foreground transition-all duration-300\"\n        >\n          {tab.title}\n        </div>\n      ))}\n    </MotionHighlight>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/effects/motion-highlight-tabs-hover-parent.tsx"
    }
  ]
}