Product Card

Beta

A product card for grids, carousels and search results: the photo, badge and wishlist, then brand, name, rating and price. The whole card links to the product.

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-card
Also works with shadcn: npx shadcn@latest add @ritla/product-card
Dependencies it brings
buttonicon-buttonpriceproduct-imageratingtag
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-card.tsx

import { ProductCard } from "@/components/ui/product-card";<ProductCard  name="Lina lounge chair, oak"  href="/products/lina"  brand="Dar Oak"  badge="New"  image={{ src: "/products/lina.jpg" }}  price={{ amount: 288, compareAt: 360 }}  rating={{ value: 4.8, count: 126 }}  wishlist/>

Examples

Grid with add to cart

Square photos and an Add to cart button, two columns on a phone.

EnglishMirroredArabic

Get the code

LTR →

API reference

ProductCard

Prop	Type	Default	Description
`name / href`	`string`	None	The product name and page: the name is the link, stretched over the whole card.
`brand`	`ReactNode`	None	The brand or maker above the name.
`image / ratio`	`{ src?, alt? } / "1:1" \| "4:5" \| "3:4"`	`"3:4"`	The photo and its ratio (the exposed Product image in Figma).
`badge`	`ReactNode`	None	Show badge: a short word on the photo (“New”).
`price`	`{ amount, compareAt?, currency? … }`	None	The Price props.
`rating`	`{ value, count? }`	None	Show rating.
`wishlist`	`boolean \| { pressed, onPressedChange }`	None	Show wishlist: the heart button, with its state if you control it.
`onAddToCart`	`() => void`	None	Show add to cart: an outline button under the price.
`renderLink`	`(props) => ReactNode`	None	The link element (Next `<Link>`); it receives `href`, the classes and the name.
`headingLevel`	`2 \| 3 \| 4`	`3`	The name's heading level in your page.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	The link (the name), then the wishlist, then add to cart: each is its own stop.

ARIA

The card is an article with the name as its heading; the link stretches over it with ::after, so a click anywhere opens the product without the whole card becoming the link's name.
The wishlist is an aria-pressed button named with the product (“Save Lina chair to wishlist”), and so is “Add … to cart”.

Arabic and RTL notes

Mirrors

The badge moves to the top right and the heart to the top left; the text starts from the right.

Does not mirror

The photo, the heart and the stars never mirror, and the amounts stay isolated.

Numerals: The rating and price follow numerals.
Arabic typography: label-12 Medium for the brand, label-16 Medium for the name.