Components

Mirror Stage

The same screen in English and in Arabic side by side around a centre axis, with notes on what each rule keeps or flips.

Beta

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add mirror-stage

Also works with shadcn: npx shadcn@latest add @ritla/mirror-stage

Dependencies it brings: @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { MirrorNote, MirrorStage } from "@/components/ui/mirror-stage";

<MirrorStage
  label="The same transfer form in English and in Arabic, mirrored around a centre line."
  caption="Mirror axis"
  start={<TransferScreen lang="en" />}
  end={<TransferScreen lang="ar" />}
  notes={<MirrorNote icon={CheckIcon}>The check stays a check</MirrorNote>}
  motion={{ pauseLabel: "Pause motion", playLabel: "Play motion" }}
/>

API reference

MirrorStage

Prop	Type	Default	Description
`start / end`	`ReactNode`	None	The two screens, each in its own `dir` and `lang`, which the page sets. The page's own language goes at the start.
`label`	`string`	None	What the stage shows, in words: it is announced as one image.
`caption`	`ReactNode`	None	The words over the axis.
`notes`	`ReactNode`	None	`MirrorNote`s, top to bottom.
`noteRows`	`string`	None	The notes column's rows from md, so each note sits level with the row it explains.
`startAside / endAside`	`ReactNode`	None	Extra screens at the outer corners, from xl.
`motion`	`{ pauseLabel; playLabel }`	None	The pause control's words. Give it whenever anything inside moves for longer than five seconds.

MirrorNote

Prop	Type	Default	Description
`icon`	`IconComponent`	None	A Phosphor or Ritla UI icon; directional ones mirror by the Ritla UI list.
`children`	`ReactNode`	None	The note.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the pause control; the screens inside the stage take no focus.

ARIA

The stage is one image (role="img") named by label; the screens are inert, so nobody tabs into a form that cannot be sent.
The pause control is a real button outside the image; its words say what a press does, and it starts paused for visitors who ask for reduced motion.
The screens' entrance from the axis does not run under reduced motion.

Arabic and RTL notes

Mirrors

On an Arabic page the start screen sits on the right, and both screens enter from the axis side.
Below md the axis folds away: start, the notes as a row, then end.

Does not mirror

Each screen keeps its own direction: the English screen is left to right on any page.
The check in the notes never mirrors; the arrow does.

Numerals: Numbers inside the screens follow each component's numerals setting.
Arabic typography: Notes are label-12 Medium, in the page's language font.
Mixed-direction text: The phone number in the Arabic screen stays left to right, because it is the real phone field.