---
title: RTL Support
version: 1.1+
description:
Chakra UI provides built-in support right-to-left (RTL) languages like arabic
and hebrew, out of the box.
category: 'features'
---
For right-to-left (RTL) languages such as Arabic and Hebrew to be semantically
appropriate, in addition to translating the texts, you need to also mirror the
layout.
Chakra UI makes it possible to support RTL languages and LTR languages in the
same app. There are 2 methods of adding RTL support:
- Using the RTL Stylis Plugin
- Using RTL-aware style props
## Using RTL Stylis Plugin
Since Chakra UI is built on top of `@emotion/react`, you can leverage stylis
plugins like `stylis-plugin-rtl` to automatically transform the generated styles
to their RTL equivalent.
Here's how to set it up.
1. Install the stylis plugin and emotion's cache
2. Create the RTL provider using `CacheProvider` from emotion
```jsx live=false
// src/components/rtl-provider.js
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import rtl from 'stylis-plugin-rtl'
// NB: A unique `key` is important for it to work!
const options = {
rtl: { key: 'css-ar', stylisPlugins: [rtl] },
ltr: { key: 'css-en' },
}
export function RtlProvider({ children }) {
const { locale } = useRouter()
const dir = locale == 'ar' ? 'rtl' : 'ltr'
const cache = createCache(options[dir])
return
}
```
3. Add RTL provider to the application's root
```jsx live=false ln={4,10-12}
// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
import { RtlProvider } from '@/components/rtl-provider'
function App(props) {
const { Component, pageProps } = props
return (
)
}
export default App
```
4. Add the `dir` and `lang` attributes to the `html` tag.
You'll need to make a few changes to your markup. In the `` tag, you'll
need to add a `dir` attribute with a value of `rtl` or `ltr`. Here's what your
`` tag should look like:
```jsx live=false
/**
* `lang` can be "ar", "en", "he", etc.
* `dir` can be "rtl" or "ltr"
*/
{/* Content */}
```
In Next.js, you can achieve this by adding a `pages/_document.js` file and using
this API:
```jsx live=false ln={11-12,15}
// pages/_document.js
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
class Document extends NextDocument {
static async getInitialProps(ctx) {
return await NextDocument.getInitialProps(ctx)
}
render() {
const { locale } = this.props.__NEXT_DATA__
const dir = locale === "ar" ? "rtl" : "ltr"
return (
{/* 👇🏻 Here's the place to change the `dir` and `lang` */}