https://github.com/saleh7/shadcnui-rtl
Transform shadcn/ui components to RTL - One command, full Arabic/farsi/urdu support
https://github.com/saleh7/shadcnui-rtl
arabic farsi react right-to-left rtl shadcn shadcn-ui tailwind transform urdu
Last synced: 14 days ago
JSON representation
Transform shadcn/ui components to RTL - One command, full Arabic/farsi/urdu support
- Host: GitHub
- URL: https://github.com/saleh7/shadcnui-rtl
- Owner: Saleh7
- License: mit
- Created: 2025-09-27T14:19:42.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2025-09-27T15:45:52.000Z (22 days ago)
- Last Synced: 2025-09-27T17:36:30.173Z (22 days ago)
- Topics: arabic, farsi, react, right-to-left, rtl, shadcn, shadcn-ui, tailwind, transform, urdu
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/shadcnui-rtl
- Size: 19.5 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# shadcnui-rtl 🔄
[](https://www.npmjs.com/package/shadcnui-rtl)
[](https://opensource.org/licenses/MIT)
> 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)
```bash
npm install -g shadcnui-rtl
```
### Using npx (No Installation)
```bash
npx shadcnui-rtl
```
### Local Installation
```bash
npm install --save-dev shadcnui-rtl
```
## 🚀 Quick Start
```bash
# Run in your project root
npx shadcnui-rtl
# That's it! Your components now support RTL 🎉
```
## 📖 Usage
### Basic Usage
```bash
# Transform components in default directory (src/components)
shadcnui-rtl
# Or use the short alias
scnrtl
```
### Custom Directory
```bash
shadcnui-rtl --path ./components
```
### Preview Changes (Dry Run)
```bash
shadcnui-rtl --dry-run
```
### Create Backups
```bash
shadcnui-rtl --backup
```
### Advanced Options
```bash
# 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
```tsx
Click me
```
### After
```tsx
Click me
```
## 🛡️ 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
```bash
# Run tests
npm test
# Watch mode
npm run test:watch
# Coverage report
npm run test:coverage
```
## 🤝 Contributing
We welcome contributions! Please see [CONTRIBUTING.md](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](CHANGELOG.md) for a list of changes.
## 📄 License
MIT © [Saleh7](https://github.com/Saleh7)
## 🙏 Acknowledgments
- [shadcn/ui](https://ui.shadcn.com/) for the amazing component library
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
- [Radix UI](https://www.radix-ui.com/) for accessible component primitives
## 💬 Support
- 🐛 [Report bugs](https://github.com/Saleh7/shadcnui-rtl/issues)
- 💡 [Request features](https://github.com/Saleh7/shadcnui-rtl/issues)
- 📧 [Contact](mailto:Saleh7@protonmail.ch)
---
Made with ❤️ for the RTL community