Direction — Vanilla

RTL/LTR wrapper with vanilla HTML. Sets dir on container.

Direction

Wrapper that sets dir="ltr" or dir="rtl". Use class direction direction--rtl or direction direction--ltr.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

Right-to-left content here.

HTML

html html
<!-- Rizzo CSS. Sets dir on container. -->
<div class="direction direction--rtl" dir="rtl">
  <p>Right-to-left content here.</p>
</div>

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React