Banner
An announcement bar across the top of the page, a cookie card, and a promo with an illustration and its action.
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
Promo with illustration
EnglishMirroredArabic
DesktopMobile
LTR →
Installation
Add the block
npx ritla add bannerAlso works with shadcn:
npx shadcn@latest add @ritla/banner
Built from
The Ritla UI components this block is made of. Each is installed with it.
Arabic and RTL notes
Mirrors
- Icons and illustrations sit on the right, the close button on the left.
- The promo's action arrow points left.
Does not mirror
- The sparkle and info icons, and the illustration's own drawing.
- Mixed-direction text
- The message can arrive in either language, so it sets its own direction.