Marketing

Product Card

Pronew

A storefront card with media, a price, badges and actions.

Bestseller

Studio Wireless

$249

Over-ear headphones with 40-hour battery and soft-touch cups.

4.8(1,204)

−22%

Field Watch 38

~~$229~~$179

A lightweight everyday watch with a ceramic case.

4.6(312)

Installation

npx shadcn@latest add @blank-pro/product-card

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  ProductCard,
  ProductCardContent,
  ProductCardHeader,
  ProductCardMedia,
  ProductCardOverlay,
  ProductCardPrice,
  ProductCardTitle,
} from "@/components/ui/product-card"

<ProductCard>
  <ProductCardMedia>
    <img src="/headphones.jpg" alt="Studio Wireless" />
    <ProductCardOverlay>
      <Badge>New</Badge>
    </ProductCardOverlay>
  </ProductCardMedia>
  <ProductCardContent>
    <ProductCardHeader>
      <ProductCardTitle>Studio Wireless</ProductCardTitle>
      <ProductCardPrice>$249</ProductCardPrice>
    </ProductCardHeader>
  </ProductCardContent>
</ProductCard>

ProductCardOverlay floats over the media with its children spread to the two corners — a badge on the left, a save button on the right. Put the old price in a <del> inside ProductCardPrice to show a markdown.

Examples

With a slideshow

variant="ghost" is the storefront grid look: the image carries the frame and the copy sits under it. Any media works in ProductCardMedia — here, a Preview Card Slideshow.

Alpine Light preset applied to a mountain landscape

24 presets

Alpine Light — Lightroom presets

$29

NNora Lind3.2k