# Shadcn Product Card blocks

> E-commerce product cards with images, pricing, variants, and add-to-cart actions.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/product-card
- Blocks: 10
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A catalog or collection page of items for sale, from a plain tile grid to one with filters and sort
- A similar items or latest arrivals row that pages through 4 tiles at a time with arrow buttons
- A single item quick buy panel with a size or finish picker beside add to bag and wishlist buttons

## When not to use

- Dashboard or admin tiles for metrics, records or settings, with nothing for sale: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- Departments or collections to browse into, with no per item price or buy control: use the [Category Card blocks](https://web.dev.reui.io/blocks/ecommerce/category-card.md)
- A full page for one item with its gallery, spec tables, reviews and related items: use the [Product Detail blocks](https://web.dev.reui.io/blocks/ecommerce/product-detail.md)

## Agent notes

- `ProductCard` takes no props and renders demo items defined in its own files; add a prop to pass in your catalog
- Every `price` and `compareAtPrice` is a preformatted dollar string; format amounts and currency before you pass them
- Each page.tsx wraps `ProductCard` in a padded `min-h-svh` wrapper; strip it when the block sits inside your storefront layout

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 3 of 10 blocks

## Blocks

- [Apparel Wishlist Grid](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-1.md): Apparel Product Grid with Wishlist Toggle and Discount Badges. Best for borderless apparel tiles under a centered breadcrumb and title, each with a pinned wishlist heart and no cart or filter controls.
- [Colorway Catalog](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-2.md): Ecommerce product grid with filters, sort, color swatches, and wishlist. Best for colorway swatches on each tile that swap its photo, plus a color family chip filter beside category, stock and sale filters.
- [Quick Buy Card](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-3.md): Quick-buy product card with image carousel, sale pricing, and size picker. Best for one apparel quick buy with a looping 2 photo carousel, an XS to XL size grid and a size guide link beside the size label.
- [Related Products](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-4.md): Similar products carousel of product cards with wishlist, discount and stock badges. Best for a related items carousel with a page counter badge beside its heading, an items left badge on low stock tiles and no cart buttons.
- [Featured Product](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-5.md): Split Two-Column Product Card with Finish Selector and Wishlist. Best for a single product spotlight with a star rating, a 3 point feature checklist, a 5 finish picker and a photo masked to 2 cut corners.
- [Masonry Gallery](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-6.md): Masonry product gallery with hover-reveal detail overlay and filter or sort popover toolbar. Best for a masonry wall of mixed ratio photos whose details slide in on hover, filtered by signal and price band with a live piece count.
- [New Arrivals Carousel](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-7.md): Latest Products Carousel with Wishlist Toggle and Hover Add-to-Cart. Best for a new arrivals carousel whose hover add to cart flips to Added, with a disabled Sold Out state and an arrival note beside each price.
- [Rated Product Grid](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-8.md): Filterable e-commerce product grid with sort, ratings, and wishlist. Best for a rated device grid with a Highest Rated sort, category and status filters, a live device count and an add to cart on every tile.
- [Four-Column Catalog](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-9.md): Four-Column Product Grid with Breadcrumb Header and Star Ratings. Best for a 4 column grid split by vertical divider lines, with a shipping note beside each price and a square photo with one large curved corner.
- [Fashion Lookbook Grid](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-10.md): Fashion Studio Product Grid with Hover-Reveal Details Panel. Best for full bleed photo tiles with an overlaid title, where hover slides up a blurred panel of size chips, categories and price.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.