Incentive
A store promise with an icon: free delivery, returns, cash on delivery, secure checkout. Three or four in a row.
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 incentiveAlso works with shadcn:
npx shadcn@latest add @ritla/incentiveOr 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 { Incentive } from "@/components/ui/incentive";import { TruckIcon } from "@phosphor-icons/react/ssr";<Incentive icon={TruckIcon} title="Free delivery" description="On orders over JOD 300 in Amman and Zarqa." />API reference
Incentive
| Prop | Type | Default | Description |
|---|---|---|---|
icon | IconComponent | None | The promise's Phosphor icon. Decorative: the title says it. |
title | ReactNode | None | The promise in two or three words. |
description | ReactNode | None | A line with the condition. |
Accessibility
ARIA
- Text, and an icon hidden from screen readers; nothing interactive.
Arabic and RTL notes
Mirrors
- The icon tile is on the right with the text to its left; directional icons (the return arrow) flip on their own.
Does not mirror
- The truck, shield and money glyphs never mirror.
- Numerals
- Numbers in the description are your own text (“JOD 300”).
- Arabic typography
label-16Semibold for the title,body-14ingray/mutedfor the description.