{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-tabs-demo",
  "title": "Fluid Tabs Demo",
  "description": "Example showing tabs with animated underline and pill indicators.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://pioneerui.com/r/fluid-tabs"
  ],
  "files": [
    {
      "path": "registry/example/fluid-tabs-demo.tsx",
      "content": "import { FluidTabs } from \"../pioneerui/fluid-tabs\"\n\nconst tabs = [\n  {\n    value: \"overview\",\n    label: \"Overview\",\n    content: (\n      <div className=\"rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground\">\n        This is the overview tab content. Smooth underline indicator animates between tabs.\n      </div>\n    ),\n  },\n  {\n    value: \"analytics\",\n    label: \"Analytics\",\n    content: (\n      <div className=\"rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground\">\n        Analytics content goes here. The tab indicator uses Framer Motion layoutId.\n      </div>\n    ),\n  },\n  {\n    value: \"settings\",\n    label: \"Settings\",\n    content: (\n      <div className=\"rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground\">\n        Settings content goes here. Tab content fades in smoothly on change.\n      </div>\n    ),\n  },\n]\n\nexport default function FluidTabsDemo() {\n  return (\n    <div className=\"p-6 max-w-lg mx-auto space-y-8\">\n      <div>\n        <p className=\"mb-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">Underline variant</p>\n        <FluidTabs tabs={tabs} defaultValue=\"overview\" variant=\"underline\" />\n      </div>\n      <div>\n        <p className=\"mb-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">Pill variant</p>\n        <FluidTabs tabs={tabs} defaultValue=\"analytics\" variant=\"pill\" />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/fluid-tabs-demo.tsx"
    }
  ],
  "type": "registry:example"
}