Clerk Components RTL Problems

[shadoworion]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/clerk/javascript

Publishable key

pk_test_ZGVjZW50LW1vbGUtNy5jbGVyay5hY2NvdW50cy5kZXYk

Description

Sing In / Sign Up component:
The Arrow icon on submit button may be with direction to the left with right margin:

Position of the eye icon may be on the left of the input:

User Button component:
User avatar and user name may be reversed:

User Profile Popup component:
Close button may be on the left corner of the popup:

Problem with content corners (may be without border-radius):

Phone number may be with ltr direction:

Every button hover arrows may be with direction to the left with right margin:

Environment

System:
    OS: macOS 14.6.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 1.65 GB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.1 - /usr/local/bin/npm
    bun: 1.1.23 - ~/.bun/bin/bun
  Browsers:
    Chrome: 127.0.6533.101
    Edge: 127.0.2651.98
    Safari: 17.6
  npmPackages:
    @aws-sdk/client-s3: 3.629.0 => 3.629.0 
    @aws-sdk/lib-storage: 3.629.0 => 3.629.0 
    @bloxtax/react-icons: 5.2.1 => 5.2.1 
    @clerk/clerk-react: 5.4.1 => 5.4.1 
    @clerk/localizations: 2.5.8 => 2.5.8 
    @dnd-kit/core: 6.1.0 => 6.1.0 
    @dnd-kit/modifiers: 7.0.0 => 7.0.0 
    @dnd-kit/sortable: 8.0.0 => 8.0.0 
    @graphql-codegen/cli: 5.0.2 => 5.0.2 
    @graphql-codegen/typescript: 4.0.9 => 4.0.9 
    @graphql-codegen/typescript-graphql-request: 6.2.0 => 6.2.0 
    @graphql-codegen/typescript-operations: 4.2.3 => 4.2.3 
    @hookform/error-message: 2.0.1 => 2.0.1 
    @tanstack/react-query: 5.51.23 => 5.51.23 
    @tinymce/tinymce-react: 5.1.1 => 5.1.1 
    @types/crypto-js: 4.2.2 => 4.2.2 
    @types/lodash.get: 4.4.9 => 4.4.9 
    @types/logrocket-react: 3.0.3 => 3.0.3 
    @types/node: 22.3.0 => 22.3.0 
    @types/react: 18.3.3 => 18.3.3 
    @types/react-dom: 18.3.0 => 18.3.0 
    @types/react-google-recaptcha: 2.1.9 => 2.1.9 
    @types/react-helmet: 6.1.11 => 6.1.11 
    @types/uuid: 10.0.0 => 10.0.0 
    @vitejs/plugin-react-swc: 3.7.0 => 3.7.0 
    ag-grid-community: 32.1.0 => 32.1.0 
    ag-grid-enterprise: 32.1.0 => 32.1.0 
    ag-grid-react: 32.1.0 => 32.1.0 
    ahooks: 3.8.1 => 3.8.1 
    antd: 5.20.1 => 5.20.1 
    antd-img-crop: 4.22.0 => 4.22.0 
    axios: 1.7.4 => 1.7.4 
    capture-console-logs: 2.0.1-rc.1 => 2.0.1-rc.1 
    classnames: 2.5.1 => 2.5.1 
    crypto-js: 4.2.0 => 4.2.0 
    dayjs: 1.11.12 => 1.11.12 
    ethers: 6.13.2 => 6.13.2 
    filesize: 10.1.4 => 10.1.4 
    framer-motion: 11.3.24 => 11.3.24 
    graphql: 16.9.0 => 16.9.0 
    graphql-request: 7.1.0 => 7.1.0 
    graphql-tag: 2.12.6 => 2.12.6 
    libphonenumber-js: 1.11.5 => 1.11.5 
    lodash.get: 4.4.2 => 4.4.2 
    logrocket: 8.1.2 => 8.1.2 
    logrocket-react: 6.0.3 => 6.0.3 
    mime: 4.0.4 => 4.0.4 
    rc-virtual-list: 3.14.5 => 3.14.5 
    react: 18.3.1 => 18.3.1 
    react-device-detect: 2.2.3 => 2.2.3 
    react-dom: 18.3.1 => 18.3.1 
    react-draggable: 4.4.6 => 4.4.6 
    react-google-recaptcha: 3.1.0 => 3.1.0 
    react-helmet: 6.1.0 => 6.1.0 
    react-hook-form: 7.52.2 => 7.52.2 
    react-icons: 5.3.0 => 5.3.0 
    react-json-view-lite: 1.4.0 => 1.4.0 
    react-router-dom: 6.26.0 => 6.26.0 
    react-usestateref: 1.0.9 => 1.0.9 
    recharts: 2.12.7 => 2.12.7 
    typesafe-i18n: 5.26.2 => 5.26.2 
    typescript: 5.5.4 => 5.5.4 
    unocss: 0.62.1 => 0.62.1 
    use-query-params: 2.2.1 => 2.2.1 
    uuid: 10.0.0 => 10.0.0 
    vite: 5.4.0 => 5.4.0 
    zustand: 4.5.4 => 4.5.4

[alexcarpenter]

@shadoworion appreciate the detailed run down of all the different instances that can be improved here. We are currently working on a rebuild of our AIO components and making sure RTL support is fully accounted for.