clerk · alexcarpenter · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/.changeset/cuddly-ends-wait.md b/.changeset/cuddly-ends-wait.md
@@ -0,0 +1,15 @@
+---
+'@clerk/ui': minor
+---
+
+Improve RTL support by converting physical CSS properties (margins, padding, text alignment, borders) to logical equivalents and adding direction-aware arrow icons
+
+The changes included:
+
+- Positioning (left → insetInlineStart)
+- Margins (marginLeft/Right → marginInlineStart/End)
+- Padding (paddingLeft/Right → paddingInlineStart/End)
+- Text alignment (left/right → start/end)
+- Border radius (borderTopLeftRadius → borderStartStartRadius)
+- Arrow icon flipping with scaleX(-1) in RTL
+- Animation direction adjustments
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -171,6 +171,83 @@ const noUnstableMethods = {
   },
 };
 
+const noPhysicalCssProperties = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce use of CSS logical properties instead of physical properties for RTL support',
+      recommended: false,
+    },
+    messages: {
+      useLogicalProperty:
+        'Use logical CSS property "{{logical}}" instead of physical property "{{physical}}" for RTL support.',
+      useLogicalTextAlign:
+        'Use logical textAlign value "{{logical}}" instead of physical value "{{physical}}" for RTL support.',
+    },
+    schema: [],
+  },
+  create(context) {
+    // Mapping of physical properties to logical equivalents
+    const propertyMap = {
+      left: 'insetInlineStart',
+      right: 'insetInlineEnd',
+      marginLeft: 'marginInlineStart',
+      marginRight: 'marginInlineEnd',
+      paddingLeft: 'paddingInlineStart',
+      paddingRight: 'paddingInlineEnd',
+      borderLeft: 'borderInlineStart',
+      borderRight: 'borderInlineEnd',
+      borderLeftWidth: 'borderInlineStartWidth',
+      borderRightWidth: 'borderInlineEndWidth',
+      borderLeftStyle: 'borderInlineStartStyle',
+      borderRightStyle: 'borderInlineEndStyle',
+      borderLeftColor: 'borderInlineStartColor',
+      borderRightColor: 'borderInlineEndColor',
+      borderTopLeftRadius: 'borderStartStartRadius',
+      borderTopRightRadius: 'borderStartEndRadius',
+      borderBottomLeftRadius: 'borderEndStartRadius',
+      borderBottomRightRadius: 'borderEndEndRadius',
+    };
+
+    const checkProperty = (key, value) => {
+      const keyName = key.type === 'Identifier' ? key.name : key.value;
+
+      // Check for physical property names
+      if (propertyMap[keyName]) {
+        context.report({
+          node: key,
+          messageId: 'useLogicalProperty',
+          data: {
+            physical: keyName,
+            logical: propertyMap[keyName],
+          },
+        });
+      }
+
+      // Check for textAlign with physical values
+      if (keyName === 'textAlign' && value) {
+        if (value.type === 'Literal' && (value.value === 'left' || value.value === 'right')) {
+          const logicalValue = value.value === 'left' ? 'start' : 'end';
+          context.report({
+            node: value,
+            messageId: 'useLogicalTextAlign',
+            data: {
+              physical: value.value,
+              logical: logicalValue,
+            },
+          });
+        }
+      }
+    };
+
+    return {
+      Property(node) {
+        checkProperty(node.key, node.value);
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -248,6 +325,7 @@ export default tseslint.config([
         rules: {
           'no-global-object': noGlobalObject,
           'no-unstable-methods': noUnstableMethods,
+          'no-physical-css-properties': noPhysicalCssProperties,
         },
       },
       'simple-import-sort': pluginSimpleImportSort,
@@ -458,6 +536,13 @@ export default tseslint.config([
       'custom-rules/no-unstable-methods': 'error',
     },
   },
+  {
+    name: 'packages/ui',
+    files: ['packages/ui/src/**/*'],
+    rules: {
+      'custom-rules/no-physical-css-properties': 'error',
+    },
+  },
   {
     name: 'packages - vitest',
     files: ['packages/*/src/**/*.test.{ts,tsx}'],

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
@@ -1,5 +1,8 @@
 <!doctype html>
-<html class="h-full">
+<html
+  class="h-full"
+  dir="rtl"
+>
   <head>
     <title>clerk-js Sandbox</title>
     <meta charset="utf-8" />

diff --git a/packages/ui/src/common/InfiniteListSpinner.tsx b/packages/ui/src/common/InfiniteListSpinner.tsx
@@ -16,6 +16,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

diff --git a/packages/ui/src/common/NotificationCountBadge.tsx b/packages/ui/src/common/NotificationCountBadge.tsx
@@ -32,7 +32,7 @@ export const NotificationCountBadge = (props: NotificationCountBadgeProps) => {
       as='span'
       sx={[
         t => ({
-          marginLeft: t.space.$1x5,
+          marginInlineStart: t.space.$1x5,
         }),
         containerSx,
       ]}

diff --git a/packages/ui/src/common/PrintableComponent.tsx b/packages/ui/src/common/PrintableComponent.tsx
@@ -24,6 +24,7 @@ export const PrintableComponent = (props: UsePrintableReturn['printableProps'] &
   return (
     <div
       ref={ref}
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Off-screen hide for print functionality
       style={{ position: 'fixed', left: '-9999px', top: 0, display: 'none' }}
     >
       {children}

diff --git a/packages/ui/src/common/organizations/OrganizationPreview.tsx b/packages/ui/src/common/organizations/OrganizationPreview.tsx
@@ -96,6 +96,7 @@ export const OrganizationPreviewSpinner = forwardRef<HTMLDivElement>((_, ref) =>
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

diff --git a/packages/ui/src/components/APIKeys/APIKeyModal.tsx b/packages/ui/src/components/APIKeys/APIKeyModal.tsx
@@ -18,7 +18,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
     modalRoot
       ? t => ({
           position: 'absolute',
-          right: 0,
+          insetInlineEnd: 0,
           bottom: 0,
           backgroundColor: 'inherit',
           backdropFilter: `blur(${t.sizes.$2})`,

diff --git a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
@@ -42,7 +42,7 @@ export const APIKeysTable = ({
           <Tr>
             <Th>Name</Th>
             <Th>Last used</Th>
-            {canManageAPIKeys && <Th sx={{ textAlign: 'right' }}>Actions</Th>}
+            {canManageAPIKeys && <Th sx={{ textAlign: 'end' }}>Actions</Th>}
           </Tr>
         </Thead>
         <Tbody>
@@ -98,7 +98,7 @@ export const APIKeysTable = ({
                   </Box>
                 </Td>
                 {canManageAPIKeys && (
-                  <Td sx={{ textAlign: 'right' }}>
+                  <Td sx={{ textAlign: 'end' }}>
                     <ThreeDotsMenu
                       actions={[
                         {

diff --git a/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx b/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
@@ -63,7 +63,7 @@ export const CopyAPIKeyModal = ({
       >
         <Card.Content
           sx={t => ({
-            textAlign: 'left',
+            textAlign: 'start',
             padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`,
           })}
         >

diff --git a/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
@@ -74,7 +74,7 @@ export const RevokeAPIKeyConfirmationModal = ({
       >
         <Card.Content
           sx={t => ({
-            textAlign: 'left',
+            textAlign: 'start',
             padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`,
           })}
         >

diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -139,7 +139,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         headerSubtitle={props?.startPage?.headerSubtitle}
         headerTitleTextVariant={headerTitleTextVariant}
         headerSubtitleTextVariant={headerSubtitleTextVariant}
-        sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'left' })}
+        sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'start' })}
       >
         <Form.Root
           onSubmit={onSubmit}
@@ -224,7 +224,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         headerTitle={localizationKeys('organizationProfile.invitePage.title')}
         headerTitleTextVariant={headerTitleTextVariant}
         headerSubtitleTextVariant={headerSubtitleTextVariant}
-        sx={t => ({ minHeight: t.sizes.$60, textAlign: 'left' })}
+        sx={t => ({ minHeight: t.sizes.$60, textAlign: 'start' })}
       >
         {organization && (
           <InviteMembersForm
@@ -239,7 +239,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.invitePage.title')}
-            sx={{ textAlign: 'left' }}
+            sx={{ textAlign: 'start' }}
           />
         </Header.Root>
         <SuccessPage

diff --git a/packages/ui/src/components/ImpersonationFab/index.tsx b/packages/ui/src/components/ImpersonationFab/index.tsx
@@ -77,8 +77,8 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
     <Col
       sx={t => ({
         width: '100%',
-        paddingLeft: t.sizes.$4,
-        paddingRight: t.sizes.$6,
+        paddingInlineStart: t.sizes.$4,
+        paddingInlineEnd: t.sizes.$6,
         whiteSpace: 'nowrap',
       })}
     >
@@ -199,6 +199,7 @@ const ImpersonationFabInternal = () => {
           position: 'fixed',
           overflow: 'hidden',
           top: `var(${topProperty}, ${defaultTop}px)`,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Complex JS-based positioning via CSS custom properties
           right: `var(${rightProperty}, ${defaultRight}px)`,
           zIndex: t.zIndices.$fab,
           boxShadow: t.shadows.$fabShadow,

diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -81,7 +81,7 @@ export function OAuthConsentInternal() {
                     sx={t => ({
                       position: 'absolute',
                       bottom: `calc(${t.space.$3} * -1)`,
-                      right: `calc(${t.space.$3} * -1)`,
+                      insetInlineEnd: `calc(${t.space.$3} * -1)`,
                     })}
                   />
                 </Box>
@@ -112,7 +112,7 @@ export function OAuthConsentInternal() {
           </Header.Root>
           <Box
             sx={t => ({
-              textAlign: 'left',
+              textAlign: 'start',
               borderWidth: t.borderWidths.$normal,
               borderStyle: t.borderStyles.$solid,
               borderColor: t.colors.$borderAlpha100,
@@ -157,7 +157,7 @@ export function OAuthConsentInternal() {
                       background: t.colors.$colorMutedForeground,
                       borderRadius: t.radii.$circle,
                       transform: 'translateY(-0.1875rem)',
-                      marginRight: t.space.$2,
+                      marginInlineEnd: t.space.$2,
                       flexShrink: 0,
                     },
                   })}

diff --git a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
@@ -125,7 +125,7 @@ const MemberRow = (props: {
           />
         </Protect>
       </Td>
-      <Td sx={{ textAlign: 'right' }}>
+      <Td sx={{ textAlign: 'end' }}>
         <Protect permission={'org:sys_memberships:manage'}>
           <ThreeDotsMenu
             actions={[

diff --git a/packages/ui/src/components/OrganizationProfile/DomainList.tsx b/packages/ui/src/components/OrganizationProfile/DomainList.tsx
@@ -168,6 +168,7 @@ export const DomainList = withProtect(
                 display: 'flex',
                 margin: 'auto',
                 position: 'absolute',
+                // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
                 left: '50%',
                 top: '50%',
                 transform: 'translateY(-50%) translateX(-50%)',

diff --git a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
@@ -101,7 +101,7 @@ const InvitationRow = (props: {
           localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>
-      <Td sx={{ textAlign: 'right' }}>
+      <Td sx={{ textAlign: 'end' }}>
         <ThreeDotsMenu
           actions={[
             {

diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
@@ -19,7 +19,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
           justify={actionSlot ? 'between' : 'end'}
           sx={t => ({
             width: '100%',
-            marginLeft: 'auto',
+            marginInlineStart: 'auto',
             padding: `${t.space.$none} ${t.space.$1}`,
           })}
           gap={actionSlot ? 2 : undefined}

diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
@@ -162,7 +162,7 @@ const OrganizationDomainsSection = () => {
               <Text
                 localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
                 sx={t => ({
-                  paddingLeft: t.space.$9,
+                  paddingInlineStart: t.space.$9,
                 })}
                 colorScheme='secondary'
               />
@@ -198,7 +198,7 @@ const OrganizationLeaveSection = () => {
             sx={t => ({
               paddingTop: 0,
               paddingBottom: 0,
-              paddingLeft: t.space.$1,
+              paddingInlineStart: t.space.$1,
             })}
             id='organizationDanger'
           >
@@ -252,7 +252,7 @@ const OrganizationDeleteSection = () => {
             sx={t => ({
               paddingTop: 0,
               paddingBottom: 0,
-              paddingLeft: t.space.$1,
+              paddingInlineStart: t.space.$1,
             })}
             id={'organizationDanger'}
           >

diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -30,8 +30,8 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
               width: '100%',
               gap: t.space.$8,
               paddingBottom: t.space.$4,
-              paddingLeft: t.space.$1,
-              paddingRight: t.space.$1,
+              paddingInlineStart: t.space.$1,
+              paddingInlineEnd: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
               borderBottomColor: t.colors.$borderAlpha100,
@@ -68,10 +68,10 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
                         'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
                       )}
                       sx={t => ({
-                        paddingLeft: t.space.$10,
+                        paddingInlineStart: t.space.$10,
                         color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
-                          paddingLeft: 0,
+                          paddingInlineStart: 0,
                         },
                       })}
                     />

diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -29,8 +29,8 @@ export const OrganizationMembersTabRequests = () => {
               width: '100%',
               gap: t.space.$8,
               paddingBottom: t.space.$4,
-              paddingLeft: t.space.$1,
-              paddingRight: t.space.$1,
+              paddingInlineStart: t.space.$1,
+              paddingInlineEnd: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
               borderBottomColor: t.colors.$borderAlpha100,
@@ -67,10 +67,10 @@ export const OrganizationMembersTabRequests = () => {
                         'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
                       )}
                       sx={t => ({
-                        paddingLeft: t.space.$10,
+                        paddingInlineStart: t.space.$10,
                         color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
-                          paddingLeft: 0,
+                          paddingInlineStart: 0,
                         },
                       })}
                     />