Price
A product's price in its currency, and on a sale the earlier price struck through with a discount tag. “JOD 288.00” in English and “288.00 د.أ” in Arabic.
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
Add the component
npx ritla add priceAlso works with shadcn:
npx shadcn@latest add @ritla/priceDependencies it brings
tagOr 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
import { Price } from "@/components/ui/price";<Price amount={288} compareAt={360} />Examples
Gulf currencies
currency takes the ISO code. In Arabic the short form is written as receipts in the region print it: ر.س، د.إ، د.ك.
EnglishMirroredArabic
LTR →
API reference
Price
| Prop | Type | Default | Description |
|---|---|---|---|
amount | number | None | The price in major units (288 for JOD 288.00). |
compareAt | number | None | Type = Sale: the price before the discount. Shown only when higher than amount. |
size | "md" | "lg" | "md" | Figma's Size: numeric-16 for cards and carts, numeric-32 for the product page. |
currency | string | "JOD" | ISO 4217 code. |
fractionDigits | number | 2 | Decimals. Shops show two, also for the dinar, so a price never shows one decimal. |
discount | string | false | None | The tag's text. Default: the percent in the page language (“20% off”); false hides it. |
formatPrice
The same formatting for a price inside text: formatPrice(288, { locale, numerals, currency }).
| Prop | Type | Default | Description |
|---|
Accessibility
ARIA
- The earlier price is a
delpreceded by a hidden “Was”, and the current one by “Now”, so a sale is read as it is seen. - The percent is text in a tag, never color alone.
Arabic and RTL notes
Mirrors
- The price comes first on the right, then the earlier price and the discount tag to its left.
Does not mirror
- Each amount is isolated in
<bdi>, so “288.00 د.أ” never reorders inside an Arabic sentence.
- Numerals
- The amounts and the percent follow
numeralson RitlaProvider: 288.00 or ٢٨٨٫٠٠. - Arabic typography
- The
numeric-*styles use tabular figures, so prices never jump when they change. - Mixed-direction text
- Arabic writes the symbol after the number (288.00 د.أ) with no closing dot, as receipts in Jordan and the Gulf do; Intl adds a dot and direction marks, so the common symbols are spelled by hand.