shadcnui-rtl 🔄

One-command RTL transformation for shadcn/ui components

Transform your shadcn/ui components to full RTL support with a single command. Perfect for Arabic, Persian, Urdu, and other RTL language applications.

✨ Features

• 🚀 One Command: Transform all your shadcn/ui components instantly
• 🎯 Smart Detection: Automatically identifies and transforms LTR classes
• 🔄 Comprehensive: Handles padding, margin, positioning, borders, text alignment, and animations
• 🛡️ Safe: Dry-run mode to preview changes, backup option for safety
• 🎨 Icon Support: Automatically rotates directional icons (ChevronLeft, ArrowRight, etc.)
• 📦 Zero Config: Works out of the box with sensible defaults
• 🧪 Battle-tested: Comprehensive test suite with 80%+ coverage

📦 Installation

Global Installation (Recommended)

npm install -g shadcnui-rtl

Using npx (No Installation)

npx shadcnui-rtl

Local Installation

npm install --save-dev shadcnui-rtl

🚀 Quick Start

# Run in your project root
npx shadcnui-rtl

# That's it! Your components now support RTL 🎉

📖 Usage

Basic Usage

# Transform components in default directory (src/components)
shadcnui-rtl

# Or use the short alias
scnrtl

Custom Directory

shadcnui-rtl --path ./components

Preview Changes (Dry Run)

shadcnui-rtl --dry-run

Create Backups

shadcnui-rtl --backup

Advanced Options

# Exclude specific files
shadcnui-rtl --exclude "dialog.tsx,modal.tsx"

# Disable icon rotation
shadcnui-rtl --no-rotate-icons

# Plain text output (no emojis)
shadcnui-rtl --no-icons

# Verbose output
shadcnui-rtl --verbose

🔄 What Gets Transformed?

Tailwind Classes

| LTR Class | RTL Class | Description | |-----------|-----------|-------------| | pl-* | ps-* | Padding left → start | | pr-* | pe-* | Padding right → end | | ml-* | ms-* | Margin left → start | | mr-* | me-* | Margin right → end | | left-* | start-* | Left position → start | | right-* | end-* | Right position → end | | rounded-l-* | rounded-s-* | Border radius left → start | | rounded-r-* | rounded-e-* | Border radius right → end | | border-l-* | border-s-* | Border left → start | | border-r-* | border-e-* | Border right → end | | text-left | text-start | Text align left → start | | text-right | text-end | Text align right → end |

Special Components

• Radio & Switch: Adds proper RTL translation classes for checked states
• Directional Icons: Automatically adds rtl:rotate-180 to:
  • ChevronLeft/Right
  • ArrowLeft/Right
  • CaretLeft/Right
  • PanelLeft/Right

Data Attributes

Transforms Radix UI positioning:

• data-side="left" → data-side="start"
• data-side="right" → data-side="end"

🎯 Examples

Before

<Button className="pl-4 pr-2 text-left">
  <ChevronLeft className="w-4 h-4" />
  Click me
</Button>

After

<Button className="ps-4 pe-2 text-start">
  <ChevronLeft className="w-4 h-4 rtl:rotate-180" />
  Click me
</Button>

🛡️ Safety Features

• Dry Run: Preview all changes without modifying files
• Backup: Create .backup files before transformation
• Exclusion: Skip specific files from transformation
• Validation: Checks component structure before transforming
• Error Recovery: Graceful handling of parsing errors

⚙️ Configuration

CLI Options

| Option | Alias | Description | Default | |--------|-------|-------------|---------| | --path | -p | Components directory path | src/components | | --dry-run | -d | Preview changes only | false | | --backup | -b | Create backup files | false | | --exclude | -e | Files to skip (comma-separated) | dialog.tsx | | --verbose | -v | Detailed output | false | | --no-icons | | Disable emoji in output | false | | --no-rotate-icons | | Skip icon rotation | false | | --help | -h | Show help | |

🧪 Testing

# Run tests
npm test

# Watch mode
npm run test:watch

# Coverage report
npm run test:coverage

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Changelog

See CHANGELOG.md for a list of changes.

📄 License

MIT © Saleh7

🙏 Acknowledgments

• shadcn/ui for the amazing component library
• Tailwind CSS for the utility-first CSS framework
• Radix UI for accessible component primitives

💬 Support

• 🐛 Report bugs
• 💡 Request features
• 📧 Contact