feat(ui): RTL support #7718

alexcarpenter · 2026-01-30T17:58:32Z

Description

Preview: https://clerk-js-sandbox-git-alexcarpenter-rtl-support.clerkstage.dev/sign-in

Inspired by https://x.com/shadcn/status/2017287507881164816 update positioning values to use logical properties to better support RTL usage.

This also adds an eslint rule to prevent noPhysicalCssProperties usage. Note some cases need to still use physical css properties and those have been disable with reasonings why.

fixes #3961

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Refactor
- Improved RTL and multilingual layout: replaced physical directional styles with logical inline/start/end properties, updated text and icon alignment, and mirrored directional arrows for correct RTL rendering; refined spinner and overlay positioning for consistent visuals.
Chores
- Enabled right-to-left rendering in the app template and bumped the UI package version.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2026-01-30T17:58:37Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jan 30, 2026 6:37pm

changeset-bot · 2026-01-30T17:58:39Z

🦋 Changeset detected

Latest commit: 7e13bb9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Minor
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

alexcarpenter · 2026-01-30T17:58:56Z

packages/clerk-js/sandbox/template.html

-<html class="h-full">
+<html
+  class="h-full"
+  dir="rtl"


For demo purposes, will revert before merging.

pkg-pr-new · 2026-01-30T18:02:21Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7718

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7718

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7718

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7718

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7718

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7718

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7718

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7718

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7718

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7718

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7718

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7718

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7718

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7718

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7718

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7718

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7718

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7718

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7718

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7718

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7718

commit: 7e13bb9

coderabbitai · 2026-01-30T18:04:13Z

📝 Walkthrough

Walkthrough

The PR converts physical directional CSS properties to logical equivalents across the UI (e.g., left/right → insetInlineStart/insetInlineEnd; marginLeft/marginRight → marginInlineStart/marginInlineEnd; paddingLeft/paddingRight → paddingInlineStart/paddingInlineEnd; border radii → logical radii) and changes textAlign from left/right to start/end. It adds dir="rtl" to the sandbox HTML template, updates several icon/arrow transforms for RTL, and introduces an ESLint rule to enforce logical CSS properties. All changes are styling-related; component logic and public APIs remain unchanged.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(ui): RTL support' accurately describes the main objective of the pull request, which is to improve RTL support by converting physical CSS properties to logical equivalents.
Linked Issues check	✅ Passed	The PR comprehensively addresses issue `#3961` by implementing CSS logical properties throughout the UI components to fix RTL layout issues including button arrow positioning, icon placement, modal alignment, border-radius, and text direction problems.
Out of Scope Changes check	✅ Passed	All changes are directly related to RTL support: converting physical CSS properties to logical equivalents, adding RTL-aware arrow icon transforms, and implementing an ESLint rule to enforce logical properties. No unrelated changes detected.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

packages/ui/src/elements/Avatar.tsx (2)
156-175: ⚠️ Potential issue | 🟠 Major

Replace physical left with logical insetInlineStart to keep RTL behavior correct.

Anchoring the shimmer to the physical left breaks RTL alignment; it should start at the inline-start edge. Please switch to logical inset properties for both the wrapper and its :after to preserve RTL support.
Proposed fix
           position: 'absolute',
           top: 0,
-          left: 0,
+          insetInlineStart: 0,
           width: '25%',
           height: '100%',
@@
             position: 'absolute',
             top: 0,
-            left: 0,
+            insetInlineStart: 0,
             width: '400%',
             height: '100%',
25-37: ⚠️ Potential issue | 🟠 Major

Add/confirm RTL regression coverage for Avatar shimmer.

No tests were added/updated alongside this RTL-facing change. Please add or confirm existing visual/snapshot coverage for RTL positioning to prevent regressions. As per coding guidelines: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.

🧹 Nitpick comments (1)

packages/ui/src/elements/TagInput.tsx (1)

112-176: Add minimal RTL regression coverage for these styling changes.

No tests were added/updated in this PR; please add a basic RTL-focused snapshot/visual test to prevent layout regressions. As per coding guidelines: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/src/elements/Header.tsx (1)

1-113: ⚠️ Potential issue | 🟠 Major

Add RTL-focused tests before merge.

This PR changes RTL-facing UI behavior but adds no tests. Please add/adjust tests (e.g., RTL snapshot/visual regression for BackLink and arrow icons) to prevent regressions.

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/ui/src/elements/Badge.tsx`:
- Around line 28-30: The badge X translate is not RTL-aware: in Badge.tsx update
the transform logic that currently uses translate(${t.space.$2x5}, ...) (paired
with insetInlineEnd) to handle RTL like Button.tsx does — wrap the transform in
a '[dir="rtl"] &' rule and provide the mirrored X value (or use scaleX(-1)) so
the horizontal offset is negated for RTL; keep the insetInlineEnd change and
ensure the selector targets the same class/element that currently has transform
applied.

packages/ui/src/elements/Badge.tsx

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/src/components/UserProfile/DeleteSection.tsx (1)

19-49: ⚠️ Potential issue | 🟠 Major

Add/confirm RTL coverage tests before merge.

This PR changes RTL styling but no tests are shown in the diff. Please add/adjust RTL visual or unit coverage (or point to existing tests) to validate these UI changes.

🤖 Fix all issues with AI agents

In `@packages/ui/src/components/UserProfile/PasswordSection.tsx`:
- Around line 39-43: Add an RTL-focused React Testing Library test for the
PasswordSection component to cover the paddingInlineStart behavior change:
render <PasswordSection /> (or the parent wrapper that sets passwordEnabled)
with dir="rtl" and with both passwordEnabled true and false, then assert the
computed style or DOM placement (e.g., check container.firstChild or the
specific element that receives the sx prop) for paddingInlineStart being '0'
when passwordEnabled is false and undefined/absent when true; use render from
`@testing-library/react` (and getComputedStyle or toHaveStyle assertions) and name
the test clearly (e.g., "renders correct paddingInlineStart in RTL") so this
regression is prevented.

packages/ui/src/components/UserProfile/PasswordSection.tsx

alexcarpenter added 2 commits January 30, 2026 12:48

feat(ui): RTL support

9fd9f1a

wip

e94d41e

github-actions bot added clerk-js core-3 labels Jan 30, 2026

alexcarpenter commented Jan 30, 2026

View reviewed changes

coderabbitai bot reviewed Jan 30, 2026

View reviewed changes

arrow animations

bb4fb4d

vercel bot deployed to Preview January 30, 2026 18:06 View deployment

coderabbitai bot reviewed Jan 30, 2026

View reviewed changes

add changeset

1f80164

vercel bot deployed to Preview January 30, 2026 18:15 View deployment

wip

5e65109

vercel bot deployed to Preview January 30, 2026 18:22 View deployment

wip

22128d9

vercel bot deployed to Preview January 30, 2026 18:25 View deployment

Add noPhysicalCssProperties eslint rule

aa42701

vercel bot deployed to Preview January 30, 2026 18:29 View deployment

coderabbitai bot reviewed Jan 30, 2026

View reviewed changes

packages/ui/src/elements/Badge.tsx Show resolved Hide resolved

coderabbitai bot reviewed Jan 30, 2026

View reviewed changes

packages/ui/src/components/UserProfile/PasswordSection.tsx Show resolved Hide resolved

Update Badge.tsx

7e13bb9

vercel bot deployed to Preview January 30, 2026 18:37 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): RTL support #7718

feat(ui): RTL support #7718

alexcarpenter commented Jan 30, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

alexcarpenter Jan 30, 2026

Uh oh!

pkg-pr-new bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 30, 2026 •

edited

Loading

Walkthrough

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(ui): RTL support #7718

Are you sure you want to change the base?

feat(ui): RTL support #7718

Conversation

alexcarpenter commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

alexcarpenter Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Jan 30, 2026 •

edited

Loading

vercel bot commented Jan 30, 2026 •

edited

Loading

changeset-bot bot commented Jan 30, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 30, 2026 •

edited

Loading

coderabbitai bot commented Jan 30, 2026 •

edited

Loading