Product Card 12 - Variant carousel with dotsPro
Product cards with an in-card image carousel that slides between colorway variants using hover arrows and pagination dots, updating the variant name and price below. Use it for sneakers, bags or tech accessories that come in several finishes.
About Product Card 12
Product cards with an in-card image carousel that slides between colorway variants using hover arrows and pagination dots, updating the variant name and price below. Use it for sneakers, bags or tech accessories that come in several finishes.
Product Card 12 is a pro product card block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 115 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- ecommerce
- card
- carousel
- variants
- dots
- slider
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-card-12Dependencies installed automatically: lucide-react, motion.
Uses: reveal, use-reduced-motion, utils.
Usage
import ProductCard12 from "@/components/blocks/product-card-12"
export default function Page() {
return <ProductCard12 />
}