Orientation of tabs component does not work in RadixUI

Question

I am using RadixUI and there is orientation props, which could be vertically set. I tried to use this prop and expect that thabs will be aligned in column but it does not work:

  <Tabs.Root orientation="vertical" className="TabsRoot" defaultValue="tab1">

Question: Did someone faced this issue and how to solve it?

Answer 1

According to Radix UI, they are a style-free library, which means that the orientation prop does not change the UI. You would need to apply the styles. vertical means that the up / down arrow will move focus within the component

You can read more about the functionality here https://github.com/radix-ui/website/issues/463

Answer 2

I tried the same with orientation without success and then found this question. You can style shadcn tabs so that they display vertically rather than horizontally. Here is how I did it by styling the component:

<TabsList className="flex mt-6 md:flex-col md:items-start md:space-y-2 md:mt-12">
  <TabsTrigger value="general">General</TabsTrigger>
  <TabsTrigger value="billing">Billing</TabsTrigger>
  <TabsTrigger value="security">Security</TabsTrigger>
</TabsList>

In my case I am using tailwindcss and I only need the vertical layout past the md breakpoint