{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "vertical-tabs",
  "title": "Vertical Tabs",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/vertical-tabs/VerticalTabs.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n  TabsRootProps & {\n    class?: HTMLAttributes['class']\n  }\n>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst delegated = reactiveOmit(props, 'class', 'orientation')\nconst forwarded = useForwardPropsEmits(delegated, emits)\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"{ 'data-slot': 'vertical-tabs', orientation: 'vertical', ...forwarded }\"\n    :class=\"cn('flex w-full gap-6', props.class)\"\n  >\n    <slot />\n  </TabsRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/VerticalTabs.vue"
    },
    {
      "path": "packages/registry-vue/components/vertical-tabs/VerticalTabsList.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TabsListProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsList, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n  TabsListProps & {\n    class?: HTMLAttributes['class']\n  }\n>()\n\nconst delegated = reactiveOmit(props, 'class')\nconst forwarded = useForwardProps(delegated)\n</script>\n\n<template>\n  <TabsList\n    data-uipkge\n    data-slot=\"vertical-tabs-list\"\n    v-bind=\"forwarded\"\n    :class=\"cn('border-border flex w-56 shrink-0 flex-col gap-0.5 border-r pr-3', props.class)\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/VerticalTabsList.vue"
    },
    {
      "path": "packages/registry-vue/components/vertical-tabs/VerticalTabsSection.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ndefineProps<{\n  label: string\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"vertical-tabs-section\"\n    :class=\"\n      cn(\n        'text-muted-foreground mt-3 mb-1 px-2 text-xs font-medium tracking-wider uppercase first:mt-0',\n        $attrs.class as string,\n      )\n    \"\n  >\n    {{ label }}\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/VerticalTabsSection.vue"
    },
    {
      "path": "packages/registry-vue/components/vertical-tabs/VerticalTabsTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { TabsTrigger } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  value: string\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n})\n\nconst delegated = computed(() => {\n  const { class: _, ...rest } = props\n  return rest\n})\n</script>\n\n<template>\n  <TabsTrigger\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"vertical-tabs-trigger\"\n    v-bind=\"delegated\"\n    :class=\"\n      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        props.class,\n      )\n    \"\n    :disabled=\"props.disabled\"\n  >\n    <span\n      aria-hidden\n      class=\"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    <slot v-bind=\"slotProps\" />\n  </TabsTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/VerticalTabsTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/vertical-tabs/VerticalTabsContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { TabsContent } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  value: string\n  forceMount?: boolean\n}\n\nconst props = defineProps<Props>()\n\nconst delegated = computed(() => {\n  const { class: _, ...rest } = props\n  return rest\n})\n</script>\n\n<template>\n  <TabsContent\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"vertical-tabs-content\"\n    v-bind=\"delegated\"\n    :class=\"\n      cn(\n        'ring-offset-background focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:outline-none',\n        props.class,\n      )\n    \"\n    :force-mount=\"props.forceMount\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </TabsContent>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/VerticalTabsContent.vue"
    },
    {
      "path": "packages/registry-vue/components/vertical-tabs/index.ts",
      "content": "export { default as VerticalTabs } from './VerticalTabs.vue'\nexport { default as VerticalTabsList } from './VerticalTabsList.vue'\nexport { default as VerticalTabsSection } from './VerticalTabsSection.vue'\nexport { default as VerticalTabsTrigger } from './VerticalTabsTrigger.vue'\nexport { default as VerticalTabsContent } from './VerticalTabsContent.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/vertical-tabs/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "reka-ui"
  ],
  "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"
  ]
}