🌍 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

1. Navigate to your Next.js project:

cd your-nextjs-app

2. Run the initialization command:

npx rtlify-next init

3. Follow the prompts to configure RTL support

4. 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:

1. Creates a DirectionProvider component - Manages RTL/LTR state across your app
2. Modifies your layout file - Adds proper dir attribute and wraps content with DirectionProvider
3. Adds CSS utilities - Includes logical property utilities to your global CSS
4. Creates a demo page - Adds an interactive page to test RTL functionality
5. 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

1. Use Logical Properties: Instead of margin-left, use margin-inline-start
2. Test Both Directions: Always verify your UI in both LTR and RTL
3. Handle Icons: Some icons need to be flipped in RTL (arrows, etc.)
4. 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