steep components
All components

ProductCard

Storefront product card with image, title, price, badges, and an Add-to-cart callback.

components/product-card.tsxPeer deps: lucide-react

Live preview

Folded shirts in a neat stackBest−38%42+ bought

Component Pack

Demo Component Pack

Fifteen production-ready storefront components.

$49.00$79.00
Folded shirts in a neat stack

Code Starter

Minimal Theme

Fifteen production-ready storefront components.

$29.00

Usage

import { ProductCard, type ProductCardProduct } from "@/components/product-card";

<ProductCard
  product={{
    id: "p_1",
    slug: "shirts",
    name: "Linen Tee",
    priceCents: 4900,
    compareAtPriceCents: 7900,
    imageUrl: img,
    isFeatured: true,
    kicker: "New",
  }}
  onAddToCart={(p) => cartStore.add(p)}
/>