RTL

Enable RTL support and styling globally across your site or to specific components only, ensuring flexibility and control over your layout.

The theui-svelte component library support RTL (Right-to-Left) layout, enabling seamless adaptation for RTL languages such as Arabic and Persian. This feature allows you to toggle between LTR and RTL layouts instantly, applying changes in real time for immediate result!

RTL For The Entire Website

To enable RTL across your entire site, simply set dir="rtl" attribute in the <html> tag in your root HTML file. By default, theui-svelte components display in LTR (Left-to-Right) mode, but adding this attribute will switch all components and elements to RTL mode.

Svelte 
<!DOCTYPE html>
<html lang="en" dir="rtl">
  <head>
    <!-- your head content -->
  </head>
  <body>
    <!-- your body content -->
  </body>
</html>

RTL For A Component

If you want to apply RTL only to a specific component, wrap the component's parent element with the dir="rtl" attribute. This will enable RTL for just that component without affecting the rest of the site.

Svelte 
<!-- Specific component in RTL mode -->
<div dir="rtl">
  <AnyComponent />
</div>

Accordion Example

Instead of entire website, you can change direction of any component you want. Just add dir="rtl" attribute to the parent element

Svelte 
<div dir="rtl">
  <AccordionItem title="Accordion title" content="Accordion"/>
</div>

This approach gives you flexibility, allowing you to enable RTL at a global or component-specific level as needed.

Enjoy building with theui-svelte and its RTL support!