For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- Departments or collections to browse into, with no per item price or buy control: use the Category Card blocks
- A full page for one item with its gallery, spec tables, reviews and related items: use the Product Detail blocks
Agent notes
ProductCardtakes no props and renders demo items defined in its own files; add a prop to pass in your catalog- Every
priceandcompareAtPriceis a preformatted dollar string; format amounts and currency before you pass them - Each page.tsx wraps
ProductCardin a paddedmin-h-svhwrapper; strip it when the block sits inside your storefront layout
Third-party API docs
- Embla Carousel v8: API reference, docs, used by 3 of 10 blocks
https://web.dev.reui.io/blocks/ecommerce/product-card.mdsearch({ query: "product card", type: "block", category: "product-card" })Shadcn Product Card Blocks for Catalog and Storefront Pages
A product card is the unit that repeats the most times on any storefront, so it carries most of the merchandising weight. These blocks ship the card and the page around it: breadcrumb headers, responsive grids, filter and sort toolbars, and the carousel rails used for related products and new arrivals.
Every card is composed from primitives you can read: Badge for discount, stock and status pills, Rating for stars and review counts, plus shadcn Card, Carousel, Popover, Select and Switch. Nothing here is a black box widget, so moving a price row or swapping the wishlist icon is a normal edit.
Treat this as the entry point for a storefront build. The catalog grid is the first screen a shopper sees, but the same cards feed the filter sidebar results, the cross-sell rail, and the path into cart and checkout.
All Product Card Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Apparel Wishlist Grid Apparel Product Grid with Wishlist Toggle and Discount Badges
- Colorway Catalog Ecommerce product grid with filters, sort, color swatches, and wishlist
- Quick Buy Card Quick-buy product card with image carousel, sale pricing, and size picker
- Related Products Similar products carousel of product cards with wishlist, discount and stock badges
- Featured Product Split Two-Column Product Card with Finish Selector and Wishlist
- Masonry Gallery Masonry product gallery with hover-reveal detail overlay and filter or sort popover toolbar
- New Arrivals Carousel Latest Products Carousel with Wishlist Toggle and Hover Add-to-Cart
- Rated Product Grid Filterable e-commerce product grid with sort, ratings, and wishlist
- Four-Column Catalog Four-Column Product Grid with Breadcrumb Header and Star Ratings
- Fashion Lookbook Grid Fashion Studio Product Grid with Hover-Reveal Details Panel
Four Card Layouts, Not One Repeated Grid
The blocks split into layout families so you can pick the density your catalog actually needs.
- Responsive product grids Two, three and four column grids with a centered breadcrumb header, category tags, star ratings, review counts, compare-at pricing and add-to-cart buttons.
- Paginated carousels Horizontal rails that page four cards at a time with prev and next controls and a page counter, built for related products, cross-sell and new arrivals.
- Masonry gallery Mixed-ratio photography in masonry columns that reveals a product detail card on hover or keyboard focus, with a Popover filter and sort bar above it.
- Quick-buy and split cards Horizontal cards that put an image Carousel or a masked hover-zoom photo next to a size grid or finish picker, so add-to-bag happens without a page change.
Merchandising Signals Built Into the Cards
The cards carry the state that makes a catalog feel live rather than static.
- Percent-off discount badges sitting next to strikethrough compare-at pricing.
- Low-stock and status pills that add urgency, plus New and Trending markers on the fashion grids.
- Star ratings with review counts on the grid and split cards, using the ReUI Rating primitive.
- Wishlist heart toggles on every card, with Tooltip labels on the quick-buy variants.
- Per-card color swatches that swap the card image, plus size grids and finish pickers for variant selection.
- Hover and focus states that zoom the image, reveal a details panel, or surface an add-to-cart button without leaving the grid.
Filtering and Sorting Ship With the Grids
Three of the grids include their own filter and sort layer instead of assuming you will bolt one on later. Filters cover category, availability, sale-only and color, exposed either as an inline toolbar or a Popover on narrow screens, with sorting by price, newest or featured.
Those controls are plain shadcn Select, Switch and Field components holding local state. Pointing them at your own query params, server actions or search API is a wiring job, not a rewrite, and the card grid below them does not need to change.
Related Shadcn eCommerce Block Categories
A storefront is never one page. These are the categories that most often ship alongside a grid of product cards.
- Product Grid Catalog grid layouts for when the page, rather than the card, is the thing you are designing.
- Filter Sidebar Faceted category, price, size and color rails to pair with a grid when a popover toolbar is not enough.
- Product Detail The page a card links to: galleries, variant pickers and add-to-cart panels.
- Shopping Cart Cart pages, header dropdowns and slide-out sheets for everything the add-to-bag buttons feed.
- Checkout Multi-step and express payment flows that close the funnel the catalog opens.
- Wishlist Saved-item pages for the heart toggle that appears on every product card here.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
What is included in a shadcn product card block?
How do I install one?
Do the variant pickers and wishlist toggles actually work?
Can I restyle the cards to match my brand?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.