Stepwise UI

Product Card

An e-commerce product card with an image carousel, colour swatches, size selector and a price footer. Supports image carousels, an optional wishlist toggle, color swatches, size selector, stats rows, and a price + CTA footer. A description (when given) stays tucked behind a "View Details" toggle instead of always showing.

Installation

npx stepwise-ui add product-card

Basic

Hardcover Novel
Hardcover NovelNew
$24
import { ProductCard } from '@/components/stepwise/product-card'

<ProductCard
  images={['/book.jpg']}
  // or, with no photo on hand yet:
  previewIcon={<span className="text-[64px]">📕</span>}
  name="Hardcover Novel"
  tag={{ label: 'New', color: 'sky' }}
  // shown behind a "View Details" toggle, not up front
  description="Cloth-bound hardcover with a ribbon marker and matte-laminated jacket."
  price={24}
  showWishlist
  ctaLabel="Add to Cart"
  onAddToCart={() => console.log('added')}
/>

With Stats

Nordic Lounge Chair
Nordic Lounge ChairNew Arrival
2.1KSold
4.9Rating
5 YrsWarranty
$340
import { ProductCard } from '@/components/stepwise/product-card'

<ProductCard
  images={['/book.jpg']}
  // or, with no photo on hand yet:
  previewIcon={<span className="text-[64px]">📕</span>}
  name="Hardcover Novel"
  tag={{ label: 'New', color: 'sky' }}
  // shown behind a "View Details" toggle, not up front
  description="Cloth-bound hardcover with a ribbon marker and matte-laminated jacket."
  price={24}
  showWishlist
  ctaLabel="Add to Cart"
  onAddToCart={() => console.log('added')}
/>

With Color & Size

Classic Cotton Tee
Classic Cotton Tee4.8 ★
Color
Size
$28
<ProductCard
  images={['/tee.jpg']}
  name="Classic Cotton Tee"
  tag={{ label: '4.8 ★', color: 'green' }}
  price={28}
  colors={['#38bdf8', '#f97316', '#f43f5e', '#22c55e']}
  sizes={['XS', 'S', 'M', 'XL', '2XL']}
  showWishlist
  ctaLabel="Add to Cart"
/>

Props

PropTypeDescription
images
string[]
Image URLs. Shows a dot carousel when more than one.
imagePosition
string
CSS object-position for the image. Default "center" - tune when the product isn't centered in the source photo.
previewIcon
React.ReactNode
Shown over a themed gradient when images is empty - pass a large emoji or icon.
name
string
Product name.
tag
ProductCardTag
Label chip shown next to the name.
description
string
Revealed behind a "View Details" toggle - not shown up front.
price
number
Numeric price.
currency
string
Currency symbol. Default "$".
colors
string[]
Hex color swatches, rendered with ColorSwatch.
sizes
string[]
Size labels (XS, S, M…).
stats
ProductStat[]
Stats row (buyers, rating, warranty…).
showWishlist
boolean
Shows a wishlist heart icon on the image. Default false - opt in per card.
ctaLabel
string
CTA button label. Default "Add to Cart".
onAddToCart
() => void
CTA click handler.
onWishlist
() => void
Wishlist toggle handler.