{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vertical-tabs",
  "title": "Vertical Tabs",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/vertical-tabs/vertical-tabs.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cn } from '@/lib/utils'\n\nconst VerticalTabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Root\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"vertical-tabs\"\n    orientation=\"vertical\"\n    className={cn('flex w-full gap-6', className)}\n    {...props}\n  />\n))\nVerticalTabs.displayName = 'VerticalTabs'\n\nconst VerticalTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"vertical-tabs-list\"\n    className={cn('border-border flex w-56 shrink-0 flex-col gap-0.5 border-r pr-3', className)}\n    {...props}\n  />\n))\nVerticalTabsList.displayName = 'VerticalTabsList'\n\nexport interface VerticalTabsSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n}\n\nconst VerticalTabsSection = React.forwardRef<HTMLDivElement, VerticalTabsSectionProps>(\n  ({ className, label, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"vertical-tabs-section\"\n      className={cn(\n        'text-muted-foreground mt-3 mb-1 px-2 text-xs font-medium tracking-wider uppercase first:mt-0',\n        className,\n      )}\n      {...props}\n    >\n      {label}\n    </div>\n  ),\n)\nVerticalTabsSection.displayName = 'VerticalTabsSection'\n\nconst VerticalTabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"vertical-tabs-trigger\"\n    className={cn(\n      'group/trigger text-muted-foreground relative flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition-[color,background-color] duration-150',\n      'hover:bg-muted/60 hover:text-foreground',\n      'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',\n      'disabled:pointer-events-none disabled:opacity-50',\n      'data-[state=active]:bg-muted data-[state=active]:text-foreground',\n      '[&>svg]:size-4 [&>svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden\n      className=\"bg-primary absolute inset-y-1 left-0 w-0.5 rounded-full opacity-0 transition-opacity duration-150 group-data-[state=active]/trigger:opacity-100\"\n    />\n    {children}\n  </TabsPrimitive.Trigger>\n))\nVerticalTabsTrigger.displayName = 'VerticalTabsTrigger'\n\nconst VerticalTabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"vertical-tabs-content\"\n    className={cn(\n      'ring-offset-background focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:outline-none',\n      className,\n    )}\n    {...props}\n  />\n))\nVerticalTabsContent.displayName = 'VerticalTabsContent'\n\nexport {\n  VerticalTabs,\n  VerticalTabsList,\n  VerticalTabsSection,\n  VerticalTabsTrigger,\n  VerticalTabsContent,\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/vertical-tabs/vertical-tabs.tsx"
    },
    {
      "path": "packages/registry-react/components/vertical-tabs/index.ts",
      "content": "export {\n  VerticalTabs,\n  VerticalTabsList,\n  VerticalTabsSection,\n  VerticalTabsTrigger,\n  VerticalTabsContent,\n  type VerticalTabsSectionProps,\n} from './vertical-tabs'\n",
      "type": "registry:ui",
      "target": "~/components/ui/vertical-tabs/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-tabs"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.",
  "categories": [
    "navigation"
  ]
}