Right-to-left (RTL)

Switching between left-to-right (LTR) and right-to-left (RTL) is a common requirement for internationalization, like for languages such as Arabic, Hebrew, Persian ...

Overview

Shuriken UI use manual tailwind dark mode using .dark class selector, instead of default behavior from tailwindcss relying on prefers-color-scheme media query.

This allows you to have more control over the dark mode appearance and to be able to switch between light and dark mode easily.

?

John Baxter

Software Engineer

John is a software engineer at UIW where he works on the UX and design systems team.

Hire Now Profile

?

John Baxteree

Software Engineer

John is a software engineer at UIW where he works on the UX and design systems team.

Hire Now Profile

How it works

Shuriken UI components are designed to work with RTL out of the box. You can easily switch between LTR and RTL by changing the dir attribute on the root element of your application.

As Shuriken UI components are built on top of Reka UI, you can also use the BaseProviders in order to set Reka UI's config to dir: 'rtl'. This will make sure that all Reka UI components are RTL-aware.

<script setup lang="ts">
useHead({
  htmlAttrs: {
    dir: 'rtl',
  },
})
</script>

<template>
  <BaseProviders
    :config="{ dir: 'rtl' }"
  >
    <NuxtPage />
  </BaseProviders>
</template>