> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/theme-ui/rtl.md).

# RTL

### Change direction to RTL <a href="#changing-direction-to-rtl" id="changing-direction-to-rtl"></a>

For changing direction to RTL only set `isRtl` in config file to `true` like following code:

<pre class="language-typescript"><code class="lang-typescript">// open config.ts file
const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  setHorizontalLayout: false, // Horizontal layout
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
<strong>  isRtl: true,
</strong>  presetColor: 'Preset 1'
}
</code></pre>

### How to add RTL scss

Add RTL scss with particular class scss like following code:

for RTL, you need to change some scss which related to  spacing padding left & right, margin left & right, left and right absolute value.

```scss
.exampleClass {
    margin-right: 10px;
    [dir="rtl"] & {
        margin-right: unset;
        margin-left: 10px;
        // RTL scss add here
    }
}
```