Skip to content
ENالعربية

Review

Beta
Get Ritla UI

A customer review: author, date, stars and text, with a “Verified purchase” tag. Reviews stack into a list with a line between them.

Open in Figma

Preview

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

PreviewCode
EnglishMirroredArabic
LTR →

Installation

  1. Add the component

    npx ritla add review

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

  2. Dependencies it brings

    avatarratingtag

  3. Or copy by hand

    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

review.tsx
import { Review } from "@/components/ui/review";<Review author="Noor Al-Hassan" date={{ label: "12 September 2026", dateTime: "2026-09-12" }} rating={5} verified>  Comfortable and solid.</Review>

API reference

Review

PropTypeDefaultDescription
author / avatarstringNoneThe name as its owner wrote it, and their photo (or the initials without one).
date{ label, dateTime }NoneThe date as shown, with its machine-readable value for time.
ratingnumberNoneThe score, 1 to 5.
childrenReactNodeNoneThe review in whichever language the customer wrote it.
verifiedbooleanNoneThe green “Verified purchase” tag.
headingLevel2 | 3 | 43The author's heading level.

Accessibility

ARIA

  • An article led by the author as a heading, so a screen reader moves between reviews by heading.
  • The stars are one image (“Rated 5 out of 5”); the avatar is hidden because the name is next to it.

Don't

  • Never ship the sample names and photos: replace them with real, consented reviews.

Arabic and RTL notes

Mirrors

  • The author is on the right and the stars on the left.

Does not mirror

  • The stars and the tag's check never mirror.
Numerals
The date is your formatted text: format it in the page numerals.
Arabic typography
label-14 Semibold for the name, label-12 for the date, body-16 in gray/strong for the text.
Mixed-direction text
The text is dir="auto": an English review on an Arabic page starts on the left with its final period where it belongs.