RTL Support #1638

nahasco · 2023-09-30T22:11:03Z

RTL support for almost all components in the registry.

Mainly replaced physical properties with logical properties and added rtl:space-x-reverse where space-x-* is used. In addition to using radix direction provider to return chevrons dynamically.

This fixes #530, fixes #4877 , fixes #5776, fixes #5658 , fixes #2759 , fixes #2736 , fixes #1919

Up to date list of adjusted components:

"🔸" means the component didn't need any changes to be compatible with RTL layouts

vercel · 2023-09-30T22:11:06Z

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

shadcn · 2023-10-03T14:50:00Z

This is interesting. I wonder if we could have this as an option via the cli. Turn on rtl in components.json and we automatically apply those updates for you.

nahasco · 2023-10-03T15:23:33Z

This is interesting. I wonder if we could have this as an option via the cli. Turn on rtl in components.json and we automatically apply those updates for you.

That's a great idea!

The changes I have added result in support of both RTL and LTR directions, by simply adding dir=rtl to the html element <html dir="rtl"> and finally wrapping the app with Radix's direction provider <DirectionProvider dir=rtl> to switch to RTL. Furthermore, when changing the properties from directional to logical I realised some icons like ChevronLeft or ChevronRight also need to be adjusted for RTL. One more minor change would be adjusting the animation directions.

Acheiving all of this via the cli would result in full RTL support, but I am not sure how can it be done.

shadcn · 2023-10-19T17:39:49Z

@nahasco I can take a look at this. Having this in the cli would be awesome. Adding it to the next milestone. I'll push to this PR and make sure you're credited for the work you've done here. Thank you.

nahasco · 2023-10-22T10:03:18Z

@nahasco I can take a look at this. Having this in the cli would be awesome. Adding it to the next milestone. I'll push to this PR and make sure you're credited for the work you've done here. Thank you.

Regarding the choice between physical and logical properties, I'd like to clarify whether you intend to use logical properties as the default for all languages. Logical properties offer the flexibility needed for seamless direction switching, and I believe they could simplify the codebase and improve adaptability for various languages.

For other specific elements like icons and HTML or radix direction values, there could be an option to manage these through the CLI to give a starting ground to the user. This approach allows us to make logical properties the primary choice for simplicity and flexibility while maintaining control over other elements that may require manual adjustments.

I'm curious to know your thoughts on this approach and whether logical properties are indeed the direction you're leaning towards. Your input on this would be highly valuable. Once again, thank you for your contribution to this!

tomer-yechiel · 2023-10-26T20:35:23Z

please keep in mind the use case of supporting both LTR and RTL in the same codebase.

mustafamoe · 2023-12-07T17:05:05Z

It would be great to have it rn 😅

dodeca-6-tope · 2024-07-07T07:35:04Z

apps/www/registry/default/ui/alert-dialog.tsx

@@ -65,7 +65,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",


Why not flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2? I think it'd be cleaner.

I didnt want to change the original styling alot. Just adding rtl:space-x-reverse at the end is the most minimal, i think.

MHBahrampour · 2024-09-06T00:47:33Z

It's really shocking that a modern UI library doesn't fully support RTL or Internationalization (like calendar). Love shadcn but I with they would consider these stuff more seriously.

shadcn · 2024-10-29T18:31:43Z

@nahasco question. is there a 1:1 mapping for those utility classes? I wonder if we could write a transformer to do these on install?

nahasco · 2024-10-29T19:07:07Z

Thank you @shadcn

@nahasco question. is there a 1:1 mapping for those utility classes? I wonder if we could write a transformer to do these on install?

I am not sure what that means. But I didn't just adjust the classes, in some components I used radix ui's direction provider to pass the dir value to the component.

For example the carousel component requires a dir value to make it rtl or ltr.

I believe RTL support should be the default for the entire library and not just an option in the cli. The changes I made make the components support rtl and ltr dynamically based on the html dir value and radix's direction provider.

In a case where a user chooses not to support RTL in the cli, but later on decides to support RTL, they will have to refactor everything. So why not make RTL support the default?

iskaa02 · 2024-11-09T01:27:02Z

My app support both RTL and LTR, For my usecase, I updated the code for RTL support by globally replacing left- with start- and right- with end-. This included properties like margins ml mr to ms me, padding pl pr to ps pe, and text alignment text-left to text-start, ...etc.
also some bugs occurred from the translate-x class so for every translate-x i would append rtl:-translate-x.

For the sidebar, I just changed the side based on the lang

for dialogs, popovers, anything that would use a portal, i wrapped the children with a div with dir tag because it's not inherited from the root

// src/components/ui/dialog.tsx
const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <div dir={languageTag() == "ar" ? "rtl" : "ltr"}>
      <DialogOverlay />
      <DialogPrimitive.Content
        ref={ref}
        className={cn(
          "fixed start-[50%] top-[50%] z-50 grid w-full max-w-lg rtl:translate-x-[50%] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
          className,
        )}
        {...props}
      >
        {children}
        <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
          <Cross2Icon className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </div>
  </DialogPortal>
));

Still facing small bugs here and there but nothing major

nitzanpap · 2024-11-11T23:26:54Z

Subscribing to this!

jjeem · 2024-11-20T15:59:07Z

Great work!
anything I can help with to push this ASAP?

nahasco · 2024-11-25T22:31:00Z

Great work!
anything I can help with to push this ASAP?

Could you help with the remaining components?

omerman · 2024-11-27T06:25:57Z

This is mazing following 🙏

nahasco · 2024-11-27T09:33:42Z

My app support both RTL and LTR, For my usecase, I updated the code for RTL support by globally replacing left- with start- and right- with end-. This included properties like margins ml mr to ms me, padding pl pr to ps pe, and text alignment text-left to text-start, ...etc.
also some bugs occurred from the translate-x class so for every translate-x i would append rtl:-translate-x.

For the sidebar, I just changed the side based on the lang

for dialogs, popovers, anything that would use a portal, i wrapped the children with a div with dir tag because it's not inherited from the root

// src/components/ui/dialog.tsx
const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <div dir={languageTag() == "ar" ? "rtl" : "ltr"}>
      <DialogOverlay />
      <DialogPrimitive.Content
        ref={ref}
        className={cn(
          "fixed start-[50%] top-[50%] z-50 grid w-full max-w-lg rtl:translate-x-[50%] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
          className,
        )}
        {...props}
      >
        {children}
        <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
          <Cross2Icon className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </div>
  </DialogPortal>
));

Still facing small bugs here and there but nothing major

This is similar to what I did in this PR. Additionally, I also added a dir state to some components and added rtl:rotate-180 to left and right chevron icons to fully support RTL.

omerman · 2024-11-27T09:38:27Z

@nahasco You are a legend!
I cant wait for this to be merged👏👏

Aymen-Khanfir

Good job, i was thinking of use rlt[] and ltr[] but you solution required less code

vercel · 2024-12-06T19:42:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	❌ Failed (Inspect)		Dec 11, 2024 7:22pm

RTL support for more components

Sidebar RTL support

shadcn mentioned this pull request Oct 3, 2023

Added Support RTL for Dialog #1635

Closed

shadcn added this to the next milestone Oct 19, 2023

shadcn added enhancement New feature or request area: component area: cli labels Oct 19, 2023

shadcn mentioned this pull request Oct 21, 2023

fix(components): fix data table header alignment in Rtl languages #1708

Closed

primemb mentioned this pull request Nov 13, 2023

Using -start and -end properties for better RTL support #1919

Closed

47vigen mentioned this pull request Dec 6, 2023

feat(rtl): add support #2059

Open

shadcn mentioned this pull request Dec 21, 2023

Update drawer.tsx #2135

Closed

nahasco changed the title ~~RTL support for almost all registry components and examples and a bug fix~~ RTL support for almost all registry components and examples Mar 4, 2024

nahasco force-pushed the main branch from 376cae9 to 415a5e7 Compare May 22, 2024 15:16

dodeca-6-tope reviewed Jul 7, 2024

View reviewed changes

nahasco closed this Sep 10, 2024

nahasco force-pushed the main branch from e9c9d11 to f4ca57a Compare September 10, 2024 22:19

nahasco added 2 commits September 11, 2024 10:18

feat(alert-dialog): add rtl support

17c6690

feat(alert): add rtl support

c83be56

nahasco reopened this Sep 11, 2024

nahasco added 3 commits September 11, 2024 11:18

feat(carousel): add rtl support

a25fa15

feat(command): add rtl support

cbe3c2c

feat(context-menu): add rtl support

3233e39

nahasco changed the title ~~RTL support for almost all registry components and examples~~ RTL Support Sep 11, 2024

feat(dialog): add rtl support

527da48

shadcn added the area: roadmap This looks great. We'll add it to the roadmap, review and merge. label Oct 29, 2024

shadcn self-assigned this Oct 29, 2024

jjeem added 3 commits November 27, 2024 21:37

feat(breadcrumb): add rtl support

d3ba573

feat(input-otp): add rtl support

14ba98c

feat(calendar): add rtl support

8525300

Aymen-Khanfir approved these changes Dec 3, 2024

View reviewed changes

feat(toast): add rtl support

3a5b777

vercel bot had a problem deploying to Preview – ui December 6, 2024 19:46 Failure

Merge pull request #1 from jjeem/main

238d856

RTL support for more components

vercel bot had a problem deploying to Preview – ui December 6, 2024 20:05 Failure

vercel bot had a problem deploying to Preview – ui December 7, 2024 08:56 Failure

Sync fork

0d46f0d

nahasco force-pushed the main branch from e0f8c22 to 0d46f0d Compare December 7, 2024 22:58

vercel bot had a problem deploying to Preview – ui December 7, 2024 23:02 Failure

jjeem and others added 2 commits December 11, 2024 00:37

feat(sidebar): add rtl support

b159f6e

Merge branch 'main' into main

370b30d

vercel bot had a problem deploying to Preview – ui December 11, 2024 13:11 Failure

jjeem and others added 2 commits December 11, 2024 18:39

Merge branch 'nahasco:main' into main

844f09a

Merge pull request #2 from jjeem/main

a1b28d9

Sidebar RTL support

vercel bot had a problem deploying to Preview – ui December 11, 2024 19:22 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RTL Support #1638

RTL Support #1638

nahasco commented Sep 30, 2023 •

edited

Loading

vercel bot commented Sep 30, 2023

shadcn commented Oct 3, 2023

nahasco commented Oct 3, 2023 •

edited

Loading

shadcn commented Oct 19, 2023 •

edited

Loading

nahasco commented Oct 22, 2023

tomer-yechiel commented Oct 26, 2023

mustafamoe commented Dec 7, 2023

dodeca-6-tope Jul 7, 2024 •

edited

Loading

nahasco Sep 11, 2024

MHBahrampour commented Sep 6, 2024

shadcn commented Oct 29, 2024

nahasco commented Oct 29, 2024

iskaa02 commented Nov 9, 2024

nitzanpap commented Nov 11, 2024

jjeem commented Nov 20, 2024

nahasco commented Nov 25, 2024

omerman commented Nov 27, 2024

nahasco commented Nov 27, 2024 •

edited

Loading

omerman commented Nov 27, 2024

Aymen-Khanfir left a comment

vercel bot commented Dec 6, 2024 •

edited

Loading

RTL Support #1638

Are you sure you want to change the base?

RTL Support #1638

Conversation

nahasco commented Sep 30, 2023 • edited Loading

Up to date list of adjusted components:

vercel bot commented Sep 30, 2023

shadcn commented Oct 3, 2023

nahasco commented Oct 3, 2023 • edited Loading

shadcn commented Oct 19, 2023 • edited Loading

nahasco commented Oct 22, 2023

tomer-yechiel commented Oct 26, 2023

mustafamoe commented Dec 7, 2023

dodeca-6-tope Jul 7, 2024 • edited Loading

Choose a reason for hiding this comment

nahasco Sep 11, 2024

Choose a reason for hiding this comment

MHBahrampour commented Sep 6, 2024

shadcn commented Oct 29, 2024

nahasco commented Oct 29, 2024

iskaa02 commented Nov 9, 2024

nitzanpap commented Nov 11, 2024

jjeem commented Nov 20, 2024

nahasco commented Nov 25, 2024

omerman commented Nov 27, 2024

nahasco commented Nov 27, 2024 • edited Loading

omerman commented Nov 27, 2024

Aymen-Khanfir left a comment

Choose a reason for hiding this comment

vercel bot commented Dec 6, 2024 • edited Loading

nahasco commented Sep 30, 2023 •

edited

Loading

nahasco commented Oct 3, 2023 •

edited

Loading

shadcn commented Oct 19, 2023 •

edited

Loading

dodeca-6-tope Jul 7, 2024 •

edited

Loading

nahasco commented Nov 27, 2024 •

edited

Loading

vercel bot commented Dec 6, 2024 •

edited

Loading