Skip to content
ENالعربية

Messaging

Beta
Get Ritla UI

A conversation screen: the inbox beside the open thread, or one support chat window. Search, unread counts, the thread header with its actions, the day's messages and the message input.

Open in Figma

Preview

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

EnglishMirroredArabic
DesktopMobile
LTR →

Examples

Support thread

One chat window in a frame, for a help centre or an in-app support chat.

EnglishMirroredArabic
DesktopMobile
LTR →

Installation

  1. Add the block

    npx ritla add messaging

    Also works with shadcn: npx shadcn@latest add @ritla/messaging

Pricing

Built from

The Ritla UI components this block is made of. Each is installed with it.

Arabic and RTL notes

Mirrors

  • The inbox moves to the right of the thread, and incoming messages sit on the right with their avatar.
  • The Back button (mobile) and the send arrow point left.

Does not mirror

  • The phone and more icons, the paperclip and the smiley.
  • Times such as 09:41 stay left to right.
Numerals
Unread counts follow the numerals setting. Times and amounts are your data: they show as you pass them, Western in Figma's Arabic screens.
Mixed-direction text
Names, previews and messages each take their own direction, so an English message reads correctly in an Arabic inbox and the reverse.