Product Card

Renders an animated product card with image, title, price, rating, and interactive buttons. It animates on load, shows a badge, and reacts to hover and clicks. Use for e-commerce product listings.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/product-card

npx layro-cli add @educlopez/product-card

npx layro-cli add @educlopez/product-card

bunx layro-cli add @educlopez/product-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useId, useState } from "react";

export interface ProductCardProps {
  badge?: string;
  className?: string;
  currency?: string;
  image: string;
  onAddToCart?: () => void;
  onWishlist?: () => void;