Package Exports

rtlify-next
rtlify-next/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rtlify-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌍 rtlify-next

Add complete RTL (Right-to-Left) support to your Next.js application in minutes. This CLI tool automatically configures your project with proper RTL support, including CSS logical properties, direction switching, and a demo page.

Features

One-command setup - Get RTL support in seconds
CSS Logical Properties - Automatic conversion of directional styles
Direction Provider - React context for managing text direction
Responsive - Works seamlessly across all screen sizes
Dark Mode Support - Full compatibility with light/dark themes
Demo Page - Interactive page to test RTL functionality
Framework Detection - Automatically detects App Router vs Pages Router
Tailwind Support - Includes RTL-friendly utility classes

Installation

npx rtlify-next@latest init

Or install globally:

npm install -g rtlify-next
rtlify-next init

Quick Start

Navigate to your Next.js project:

cd your-nextjs-app

Run the initialization command:

npx rtlify-next init

Follow the prompts to configure RTL support
Visit the demo page to see RTL in action:

# The CLI will tell you the URL, typically:
http://localhost:3000/rtl-demo

🛠️ What It Does

When you run rtlify-next init, it:

Creates a DirectionProvider component - Manages RTL/LTR state across your app
Modifies your layout file - Adds proper dir attribute and wraps content with DirectionProvider
Adds CSS utilities - Includes logical property utilities to your global CSS
Creates a demo page - Adds an interactive page to test RTL functionality
Updates your layout function - Ensures params is available for locale-based direction

Supported Frameworks

✅ Next.js 13+ (App Router)
✅ Next.js 12+ (Pages Router)
✅ TypeScript
✅ JavaScript
✅ Tailwind CSS

Best Practices

Use Logical Properties: Instead of margin-left, use margin-inline-start
Test Both Directions: Always verify your UI in both LTR and RTL
Handle Icons: Some icons need to be flipped in RTL (arrows, etc.)
Keep Email/Phone LTR: Use dir="ltr" for email inputs and phone numbers

DirectionProvider Props

Prop	Type	Default	Description
children	ReactNode	required	Child components
locale	string	'en'	Locale code (e.g., 'ar', 'en', 'he')

useDirection Hook

const direction = useDirection() // Returns: 'ltr' | 'rtl'

Troubleshooting

"params is not defined" Error

Styles Not Applying

Ensure your globals.css is imported in your layout file:

import './globals.css'

Demo Page Not Working

Check that the DirectionProvider component path is correct in the demo page import.

FAQ

Q: Does this work with i18n?
A: Yes! The DirectionProvider accepts a locale prop that automatically sets direction based on the language.

Q: Can I use this with Material-UI or other UI libraries?
A: Yes, though some libraries may need additional configuration. The CLI detects Material-UI and adds proper RTL cache setup.

Q: Will this affect my existing styles?
A: No, it only adds new utilities and components. Your existing styles remain unchanged.

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

Found a bug? Please open an issue with details.

👨‍💻 Author

Created with ❤️ by Yousuf Ghanem LinkedIn

Made with rtlify-next - The easiest way to add RTL support to Next.js