themes

themes copied to clipboard

First of all thanks for this amazing library, I can't stop using it its so good! I was just wondering if there's any plan to support RTL. I tried the DirectionProvider and it doesn't work.

'use client'

import { DirectionProvider } from '@radix-ui/react-direction'

type Props = {
  children: React.ReactNode
}

const Direction = (props: Props) => {
  return <DirectionProvider dir='rtl'>{props.children}</DirectionProvider>
}

export default Direction

Thanks!

Just as an FYI, it technically already "supports" rtl there is just no way to change the current ltr to rtl.

Here is the relevant code: https://github.com/radix-ui/themes/blob/39f5a438db0d8496134d4bc35d71899fee1b2562/packages/radix-ui-themes/src/theme.tsx#L41-L47

You could maybe propose something that moves the <DirectionProvider> into the ThemeRoot component and then create a new style script which sets the direction similar to how the theme is handled: https://github.com/radix-ui/themes/blob/39f5a438db0d8496134d4bc35d71899fee1b2562/packages/radix-ui-themes/src/theme.tsx#L106-L114

There is some additional complexity for supporting logical css properties which is why this didn't make it into the initial release, we do plan to add support though.