RTL Preview Panel
A right to left preview mocking a settings screen in English beside Arabic, plus a bidi checklist marking each check pass or issue.
A right to left preview mocking a settings screen in English beside Arabic, plus a bidi checklist marking each check pass or issue.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
RTL Preview Panel puts the same payment methods screen side by side in two reading directions. The left card renders in English with dir set to ltr, the right card in Arabic with dir set to rtl, so the panel actually mirrors: the header chevron flips, the rows realign to the right edge, and the primary button label swaps to Arabic. Below the pair a bidi checklist runs five checks, from chevron mirroring to digit direction to where the truncation ellipsis lands, each marked Pass or an issue count.
A single MockScreen component takes a dir prop and a rows array, so both cards share one layout and only the direction and copy differ. The checks array carries a pass or issue status with an optional count, and the footer ties the checklist to the build, the RTL build ships once every check passes.
Reach for this block when you add a right to left locale and need to prove the layout mirrors before you ship it. Point each MockScreen at a real screen in your app and drive the checklist from your bidi lint rules rather than a static list.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the right to left readiness review for a new locale. Other preview panel shapes:
Tip: test the mirror on a real screen with digits and Latin product names, those are the strings that break when the direction flips.