Product Detail

Get Ritla UI

A product page: a gallery with thumbnails, name, rating and price, color and a second option, quantity and add to cart, delivery promises and a details accordion.

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 block
$ npx ritla add product-detail
Also works with shadcn: npx shadcn@latest add @ritla/product-detail

Pricing

Built from

The Ritla UI components this block is made of. Each is installed with it.

Accordion
Breadcrumbs
Button
Chip
Color Swatch
Icon Button
Link
Price
Product Image
Quantity
Rating

Arabic and RTL notes

Mirrors

The gallery is on the right with its thumbnails at its inline start; the quantity comes before Add to cart.

Does not mirror

Photos, stars and the price never mirror; each amount stays one unit.