Direction
RTL/LTR wrapper: sets dir on a container for bidirectional content
Same BEM classes and behavior as Astro, Svelte, and React.
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.
Live examples
Vue
Right-to-left content here.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Direction from '../components/astro/Direction.astro';
---
<Direction dir="rtl">
<p>Right-to-left content here.</p>
</Direction>
<!-- Rizzo CSS. Sets dir on container. -->
<div class="direction direction--rtl" dir="rtl">
<p>Right-to-left content here.</p>
</div>
<script>
import { Direction } from '$lib/rizzo';
</script>
<Direction dir="rtl">
<p>Right-to-left content here.</p>
</Direction>
<script setup>
import Direction from '@/components/rizzo/Direction.vue';
</script>
<template>
<Direction dir="rtl">
<p>Right-to-left content here.</p>
</Direction>
</template>
import { Direction } from './components/react';
<Direction dir="rtl">
<p>Right-to-left content here.</p>
</Direction>
Other frameworks: Astro · Vanilla · Svelte · React