Product Card 15 block design & features
A compact shadcn/ui product card for a hair mist. The landscape product photo is masked with a curved notch in the bottom right corner, and a large round plus button sits inside that cut-out. A small star rating badge is pinned to the top right, and an eye icon button for quick view sits in the top left.
Clicking the round button adds the product to the cart: the plus crossfades to a check, the button turns green, and a frosted Added to cart overlay fades over the photo for a moment before clearing. Clicking it again removes the item and brings the plus back. It is a toggle with a pressed state and a label that switches between Add to cart and Remove from cart.
Below the image are the product name, the sale price beside the struck-through regular price, and a short row of outline tags such as Sale and Best Seller. The quick view button fades in on hover on larger screens and is always shown on mobile. The name, image, rating, tags and prices are set in a data object.