import Layout from "../../components/layout";
import { Notification } from "baseui/notification";

export default Layout;

# Bidirectionality

<Notification
  overrides={{
    Body: { style: { width: "auto" } },
  }}
>
  In this guide, you'll learn how to set up Base Web for right to left
  languages.
</Notification>

For user interfaces for languages that are read from right to left (RTL),
the interface should be mirrored. This ensures that the application is easy to understand.

## Setup

### In HTML

Add the `dir` attribute to the `body` of your application:

```html
<body dir="rtl"></body>
```

### In Base Web

You have to change the `direction` property in the Base Web theme:

```javascript
import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider } from "baseui";
import { StatefulInput } from "baseui/input";

const engine = new Styletron();

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={{ ...LightTheme, direction: "rtl" }}>
        <StatefulInput />
      </BaseProvider>
    </StyletronProvider>
  );
}
```