RTL Support #1638
RTL Support #1638
Conversation
|
Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
This is interesting. I wonder if we could have this as an option via the cli. Turn on |
That's a great idea! The changes I have added result in support of both RTL and LTR directions, by simply adding Acheiving all of this via the cli would result in full RTL support, but I am not sure how can it be done. |
|
@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! |
|
please keep in mind the use case of supporting both LTR and RTL in the same codebase. |
|
It would be great to have it rn 😅 |
nahasco
changed the title
| @@ -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", | |||
There was a problem hiding this comment.
Why not flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2? I think it'd be cleaner.
There was a problem hiding this comment.
I didnt want to change the original styling alot. Just adding rtl:space-x-reverse at the end is the most minimal, i think.
|
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. |
nahasco
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RTL support for more components
Sidebar RTL support
|
@nahasco wow, great work. I'll review. |
|
This is amazing cant wait for it be merged ! |
|
Can we do something to speed up the merge ? |
|
@shadcn We are waiting for the merged |
|
Waiting for this to be merged |
|
Same here, would love to see it too |
|
If i have customized some of the shadcn components directly to the /ui folder (button.tsx, card.tsx etc.), how would i be able to keep my changes and integrate the new RTL support ? |
I guess you will have some conflicts.. hopefully not much 🤷 |
RTL support for all components in the registry.
Mainly replaced physical properties with logical properties and added
rtl:space-x-reversewherespace-x-*is used.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