How to enable Right-to-Left (RTL) support using Chakra UI

RTL support is a means of building your website or app in a way that is responsive to the RTL text direction.

English and many other languages are written LTR but there are quite a number of languages that go from RTL such as Arabic, Hebrew and a few more.
 

In this post I'll show you how to create this card component using Chakra UI as well as enable RTL support:

 

Importance of RTL

• Helps you reach a wider audience
• Boosts customer interactions
• Improve conversions

Chakra UI supports RTL languages across all components using RTL-aware style props.

For ease of understanding, let's divide this post into 2 parts:

1. Building the UI
2. Enabling RTL support

Here we go!

 

Part 1: Building the UI

We’ll start off by using Chakra’s JavaScript code sandbox template.

Step 1: First, let’s buildout the content area using HStack to horizontally layout the Avatar, Heading and Tag components in index.js.

import {
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
} from "@chakra-ui/react";

function App() {

  return (
    <ChakraProvider>
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>       
    </ChakraProvider>
  );
}

 
Step2: Now, add in the Text component just below HStack. Then, wrap HStack and Text within a Box.

import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";

function App() {

  return (
    <ChakraProvider>
        <Box>
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
    </ChakraProvider>
  );
}

At this point, you should have something like this 👇 👇 👇

 

Step 3: Next, it's time to add some more styles to the Box using style props.

import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";

<Box
  paddingY="8"
  bg="white"
  shadow="md"
  borderStartWidth="5px"
  borderStartColor="teal"
  paddingStart="8"
  paddingEnd="6"
>
  <HStack>
    <Avatar
      name="Jill Vince"
      src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
    />
    <Heading fontSize="xl">Jill Vince</Heading>
    <Tag size="sm" variant="solid" colorScheme="teal">
      Developer
    </Tag>
  </HStack>
  <Text>
    Lorem Ipsum is simply dummy text of the printing and 
    typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown 
    printer took a galley of type and scrambled it to make a 
    type specimen book.
  </Text>
</Box>

 

Notice we're using the CSS Logical properties instead of the physical properties.

So, borderStartWidth instead of borderLeftWidth,
borderStartColor instead of borderLeftColor,
paddingStart instead of paddingLeft,
paddingEnd instead of paddingRight.

Physical properties like left or right don't automatically adjust in RTL layout. This is where logical properties come- they make the layout automatically flip from RTL to LTR and back.

 

Step 4: Let's add the star icon at the top right. Chakra provides a set of commonly used interface icons you can use in your project, called Chakra icons.
We'd use the StarIcon and import it.

 

Chakra Icons is a dependency so you'd need to install it if you're using it. Alternatively, you can use a third-party icon library.

import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {

  return (
    <ChakraProvider>
        <Box
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
    </ChakraProvider>
  );
}

 

Our Card component is looking good! You're doing amazing and only a few steps are left! 😉

Learn how to truncate text using Chakra UI

 
Step 5: Position the StarIcon relative to the parent Box. To do this, we'd need to assign position relative to the Box and position absolute to the StarIcon. Next, go ahead to add in the remaining styles for the icon.

 

Now you should have something like this 👇 👇 👇

 

At this point, you'll notice two things from our card. The first thing is, the card is too close to the edge of the screen and needs a bit of padding. The second, there needs to be a parent container with a gray color.

 
Step 6: Add a parent Box to wrap the entire component and style it like this: padding="4" bg="gray.100".

 

The final UI code is:

import React from "react";
import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Center,
  Switch,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {

  return (
    <ChakraProvider>
      <Box padding="4" bg="gray.100">
        <Box
          position="relative"
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            position="absolute"
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
      </Box>
    </ChakraProvider>
  );
}

 

Part 2: Enabling RTL support

Now that we've built out this UI, it's time to add RTL support.

 

Step 1: First, we import extendTheme function from "@chakra-ui/react". You'd need this to add direction key to the theme.

import {  extendTheme } from "@chakra-ui/react";

 

Step 2: Next, create a slice of state to keep track of the RTL and LTR states.

const [dir, setDir] = React.useState("ltr");

We also need to set the direction prop, dir and set it to this dir state on the Box component.

 

Step 3: Next, we go to ChakraProvider and add a direction key to the theme using the extendTheme function.

<ChakraProvider theme={extendTheme({ direction: dir })}>
...
</ChakraProvider>

 

Step 4: Since we'll be switching between LTR and RTL layouts, we need build out a switch that toggles this state and gives the right layout accordingly.

We'll do this using the Switch component and assign an onChange handler to it.

  <Switch
    onChange={(e) => setDir(e.target.checked ? "rtl" : "ltr")}
  />

 

Step 5: Finally, to beautify this Switch, let's center it and add LTR and RTL labels.

  <Center mt="4">
    <HStack>
      <Text>LTR</Text>
      <Switch
        onChange={(e) => setDir(e.target.checked ? "rtl" : 
        "ltr")}
      />
      <Text>RTL</Text>
    </HStack>
  </Center>

The final code snippet with RTL support enabled will look like this:

import React from "react";
import {
  extendTheme,
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Center,
  Switch,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {
  const [dir, setDir] = React.useState("ltr");

  return (
    <ChakraProvider theme={extendTheme({ direction: dir })}>
      <Box padding="4" bg="gray.100">
        <Box
          dir={dir}
          position="relative"
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            position="absolute"
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>

        <Center mt="4">
          <HStack>
            <Text>LTR</Text>
            <Switch
              onChange={(e) => setDir(e.target.checked ? "rtl" : "ltr")}
            />
            <Text>RTL</Text>
          </HStack>
        </Center>
      </Box>
    </ChakraProvider>
  );
}

 

Build with RTL support in mind

Great job, you did it! You can apply this knowledge to enable RTL on any of Chakra UI component. If you'd love a more visual walkthrough, check out this YouTube video.

For teams looking to get more international clients interact with their product and expand their reach, ensuring your website or app support RTL languages should be a priority. Chakra UI gives RTL support across all components. Get started today for FREE.