[Bug]: Tabs set orientation="vertical" not working

[qianmoQ]

Reproduction

None

Describe the bug

Code

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
</script>

<template>
  <Tabs default-value="account" orientation="vertical">
    <TabsList >
      <TabsTrigger value="account"> Account </TabsTrigger>
      <TabsTrigger value="password"> Password </TabsTrigger>
    </TabsList>
  </Tabs>
</template>

System Info

Microsoft Edge

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[chachew]

So this doesn't even seem to work with Radix-vue, which is what shadcn-vue is using under the hood.

[selemondev]

So this doesn't even seem to work with Radix-vue, which is what shadcn-vue is using under the hood.

I have gone 2 steps behind and tested Radix UI and Shadcn UI as well. In both libraries, the orientation='vertical' prop doesn't work. You can check out the comment here .

[sadeghbarati]

@zernonia Hey please transfer this issue to radix-vue then

[zernonia]

@sadeghbarati @qianmoQ as per the comment here https://github.com/radix-ui/primitives/issues/2837#issuecomment-2054088663, you need to style your own base on the data-attributes. This props only handles the keyboard behavior. So it's not relevant to radix-vue. You may check the prop description for orientation here

We can extend the styling and cater for the orientation in shadcn-vue 😁

[qianmoQ]

@sadeghbarati @qianmoQ as per the comment here radix-ui/primitives#2837 (comment), you need to style your own base on the data-attributes. This props only handles the keyboard behavior. So it's not relevant to radix-vue. You may check the prop description for orientation here

We can extend the styling and cater for the orientation in shadcn-vue 😁

https://www.radix-vue.com/components/tabs#root There is a problem with the documentation. The documentation describes the layout of tabs.