Support for RTL

[nahasco]

Thanks for this great project. It has been very useful so far.

Unfortunately, it does not support RTL layouts out of the box. I use dir='rtl' for this RTL project. What it does is structure everything from right to left instead of left to right. For example in display: flex the div at the top of the structure will be placed on the left side and the one on the bottom to its left.

Most components do not support this, for example the alert components use padding to place the icon on the left causing it to have no effect in RTL, others don't switch order for some reason like the select component.

I hope the components are tuned a bit to support RTL and further improve the accessibility of this library.

Thanks!

[nahasco]

Just noticed dir:rtl is assigned to the select components and maybe to other components too. How would I remove that and why not just remove it from all components and give the user the freedom to assign the direction as needed?

[sadeghbarati]

Use https://www.radix-ui.com/docs/primitives/utilities/direction-provider at the root of your app

Ow you're right some components are using physical, directional properties like pl-* instead of logical properties ps-*

[MhndMousa]

This is quite unfortunate.

I have been building using shadcn for quite some time and overlooked the rtl support.

I would be great to have any updates about this. I haven't come across anything yet that allows you to control.

[AhmedGamal73]

Since chadcn ui uses radix-ui you can simply solve it by wrapping your root app component with radix-ui "Direction Provider" component and make the value of it's parameters dir="rtl"

import "../@/styles/global.css";
import { DirectionProvider } from "@radix-ui/react-direction";
import { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DirectionProvider dir="rtl">
      <Component {...pageProps} />
    </DirectionProvider>
  );
}

export default MyApp;

You could install the package via npm:

npm install @radix-ui/react-direction

The reference

[mohamedtsx]

just replace the existing style

data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0

with the following:

data-[state=checked]:ltr:translate-x-5 data-[state=unchecked]:ltr:translate-x-0 data-[state=checked]:rtl:-translate-x-5 data-[state=unchecked]:rtl:-translate-x-0

[arshaan-abh]

For people who are still wondering how to make the shadcn carousel's direction RTL, you just need to pass the direction option like this:

<Carousel
    opts={{
        direction: "rtl",
    }}
>

[e-Naeim]

For people who are still wondering how to make the shadcn carousel's direction RTL, you just need to pass the direction option like this:

<Carousel
    opts={{
        direction: "rtl",
    }}
>

this works!, thanks.

[mhl98]

Many components do not support RTL, and we had to handle each one individually. I tried using DirectionProvider from Radix, but it did not work correctly. I hope RTL support will be fully integrated in the future.

[arshaan-abh]

Many components do not support RTL, and we had to handle each one individually. I tried using DirectionProvider from Radix, but it did not work correctly. I hope RTL support will be fully integrated in the future.

RTL is supported.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Beebox7Plus]

i tried @radix-ui/react-direction as comments suggest but its not working , it will be great shadcn added rtl support

[arshaan-abh]

i tried @radix-ui/react-direction as comments suggest but its not working , it will be great shadcn added rtl support

Try this: https://github.com/shadcn-ui/ui/issues/530#issuecomment-2074252042

[guptaashwanee]

This is just for carousel component or few more, I have tried it it woks

https://github.com/shadcn-ui/ui/issues/530#issuecomment-2074252042

But when I am implementing using @radix-ui/react-direction, manually I need to add the dir to the html tag