Product Image

Beta

The product photo at a fixed ratio, cropped to fill its frame, on a quiet surface while it loads or when there is no photo.

Open in Figma

Preview

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

Installation

Add the component
$ npx ritla add product-image
Also works with shadcn: npx shadcn@latest add @ritla/product-image
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

product-image.tsx

import { ProductImage } from "@/components/ui/product-image";<ProductImage src="/products/lina-chair.jpg" alt="Lina lounge chair in oak, front view" ratio="4:5" />

API reference

ProductImage

Any other <img> prop passes through (loading, sizes…).

Prop	Type	Default	Description
`src`	`string`	None	The photo. Without it the placeholder shows: `surface/high` with an image glyph.
`alt`	`string`	None	Required. What the photo shows; empty when the product name sits next to it.
`ratio`	`"1:1" \| "4:5" \| "3:4"`	`"1:1"`	Figma's Ratio: square for grids and carts, portrait for fashion and the product page.

Accessibility

ARIA

The photo is an img whose alt describes the product; in a card that shows the name, leave it empty so the name isn't read twice.
The placeholder glyph is decorative unless you give an alt.

Arabic and RTL notes

Mirrors

Nothing: the frame is the same in both directions.

Does not mirror

The photo never mirrors: a product with a logo or lettering becomes wrong when flipped.

Numerals: It holds no numbers.
Arabic typography: It holds no text.