ComponentsBlocksDocsExamples

Token UI Docs Introduction
Token UI Installation
Registry
MCP
Theming
Dark mode
RTL
References
Changelog
v1.0.27
llms.txt

Components

RTL Support

UI Library:

This guide helps you to enable the RTL(Right-to-Left) localized support for your app.

@radix-ui/react-direction

Setup

Install Radix Direction

Run the following command to add the Radix Direction provider to hande the direction support for your components:

npm install @radix-ui/react-direction

Add RTL Support

Wrap your application with the DirectionProvider component. This ensures that all components adapt their behavior according to the dir prop.

import { DirectionProvider } from '@radix-ui/react-direction';
 
export default () => (
  <html dir="rtl">
    <body>
      <DirectionProvider dir="rtl">{/* Your app */}</DirectionProvider>
    </body>
  </html>
);
PreviouseDark modeNextReferences

On This Page

  • Setup
    • Install Radix Direction
    • Add RTL Support

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy