Product Card

Animated React ecommerce product card with image zoom, pricing, ratings, sale badges, and add-to-cart interaction on hover.

Last updated: August 2, 2026

Installation

npx smoothui-cli add product-card

Features

Animated entrance on viewport entry
Image zoom on hover (hover-capable devices only)
Badge overlay for sales/new items
Star rating display
Discount pricing with strikethrough
Add to cart button with feedback animation
Respects reduced motion preferences

Accessibility

ARIA Attributes

Attribute	Element	Purpose
`role="article"`	Card	Semantic card container
`aria-label`	Card	Announces title and price
`alt`	Image	Descriptive image text
`aria-label`	Rating	Announces rating out of 5
`role="status"`	Badge	Announces discount/sale info
`aria-label`	Add to cart	Announces action with product name

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, entrance animations, hover zoom, and scale effects are disabled.

Props

Created by

Edu Calvo

Improved by

motion.dev

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.