Internationalization (i18n)

How to build localized apps with Amplify UI.

What's included?

Amplify UI components follow Web Standards with all components with the aim of making internationalization straightforward. We use logical properties for margins, borders, and padding. An example would be our use of padding-inline-start and padding-inline-end CSS properties in the default theme which ensure paddings are flipped when the language direction is changed. In addition, Flex and Grid will both honor the language direction and flip the layout as well due to the underlying use of CSS Flexbox and Grid Layout APIs.

Changing the language direction

To change the directionality of the text and layout in your application to right to left (RTL), add the direction prop with value rtl to your ThemeProvider:

Left to Right

This paragraph is in English, so it should go from left to right.

Right to Left

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

import { Alert, Text, ThemeProvider } from '@aws-amplify/ui-react';
import { useState } from 'react';

export const ThemeProviderDirectionExample = () => {
  return (
    <>
      <ThemeProvider>
        <Alert
          variation="info"
          isDismissible={false}
          hasIcon={true}
          heading="Left to Right"
        >
          <Text>
            This paragraph is in English, so it should go from left to right.
          </Text>
        </Alert>
      </ThemeProvider>
      <ThemeProvider direction="rtl">
        <Alert
          variation="success"
          isDismissible={false}
          hasIcon={true}
          heading="Right to Left"
        >
          <Text>
            هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
          </Text>
        </Alert>
      </ThemeProvider>
    </>
  );
};