Cart Item

Beta

Get Ritla UI

One line in the cart: the photo, name, chosen options and a quantity stepper, then the price and a remove button.

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 cart-item
Also works with shadcn: npx shadcn@latest add @ritla/cart-item
Dependencies it brings
icon-buttonpriceproduct-imagequantity
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

cart-item.tsx

import { CartItem } from "@/components/ui/cart-item";<ul>  <CartItem name="Lina lounge chair, oak" options="Cream · Linen" price={{ amount: 288 }} quantity={1} onQuantityChange={setQuantity} onRemove={remove} /></ul>

API reference

CartItem

Prop	Type	Default	Description
`name / href`	`string`	None	The name, and its link to the product page.
`options`	`ReactNode`	None	The options as one line (“Cream · Linen”).
`image`	`{ src?, alt? }`	None	A 96px square photo.
`price`	`{ amount, compareAt? … }`	None	The line's price (unit price × quantity, as your cart computes it).
`quantity / onQuantityChange / maxQuantity`	`number`	None	The small Quantity stepper.
`onRemove`	`() => void`	None	The remove button, named with the product (“Remove Lina chair”).

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 name, the quantity, then remove.

ARIA

An li: put lines in a ul so it reads as “list, 2 items”.
The quantity and remove are named with the product, so you never hear “Remove” three times without knowing what.

Arabic and RTL notes

Mirrors

The photo is on the right, the price and remove on the left.

Does not mirror

The photo and the trash glyph never mirror, and the amount is isolated.

Numerals: The price and the quantity follow numerals.
Arabic typography: label-16 Medium for the name, label-14 in gray/muted for the options.