Product List

Get Ritla UI

A category listing: breadcrumbs, the title and product count, sort, filters beside a three-column grid of Product cards, and pagination. On a phone the filters move behind a 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 block
$ npx ritla add product-list
Also works with shadcn: npx shadcn@latest add @ritla/product-list

Pricing

Built from

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

Breadcrumbs
Button
Pagination
Product Card
Select

Arabic and RTL notes

Mirrors

The filters are on the right and the sort on the left; breadcrumbs and pages run from the right.

Does not mirror

Photos and amounts never mirror.

Numerals: The count is a real Arabic plural: منتجان، 5 منتجات، 48 منتجًا.