20% off

Strawberries

₹

Hand-picked at sunrise in Mahabaleshwar and delivered within a day, so every box tastes like it came straight from the farm.

Best SellerMahabaleshwar

Controls

title

description

price

currency

discount

location

ctaLabel

defaultQuantity

maxQuantity

tint

accent

accentForeground

radiuspx

aspect

autoplayms

wishlist

imageFit

Product Card

Full-bleed product card with a swipeable image carousel, glass pills, rolling price and an add-to-cart button that morphs into a quantity stepper.

Motion

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/product-card

import { ProductCard } from "@/components/product-card"

const images = ["/products/01.jpg", "/products/02.jpg", "/products/03.jpg"]

export function Demo() {
  return (
    <ProductCard
      title="Strawberries"
      description="Hand-picked at sunrise in Mahabaleshwar and delivered within a day, so every box tastes like it came straight from the farm."
      price={199}
      discount="20% off"
      location="Mahabaleshwar"
      tint="#b4232c"
      wishlist
      images={images}
      badges={["Best Seller"]}
      onAddToCart={(qty) => console.log("added", qty)}
    />
  )
}

Updates live as you change the controls. Only non-default props are included.