Search code examples
reactjsradix

Orientation of tabs component does not work in RadixUI

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?

Solution

  • 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