Skip to content
ENالعربية

Page header

Get Ritla UI

The top of an app page: the title and its supporting text, the page's actions, and a breadcrumb, tabs or stat cards.

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

With tabs

EnglishMirroredArabic
DesktopMobile
LTR →

With stats

EnglishMirroredArabic
DesktopMobile
LTR →

Installation

  1. Add the block

    npx ritla add page-header

    Also works with shadcn: npx shadcn@latest add @ritla/page-header

Pricing

Arabic and RTL notes

Mirrors

  • The title starts on the right and the actions sit on the left; the breadcrumb's chevrons point left.
  • Stat cards run from the right; the first tab is on the right.

Does not mirror

  • An amount and its currency stay together as one unit.
Numerals
Stat values are yours to format; the example follows the numerals setting.