Product Card

Cards 529

About

Product Highlight Card This card uses a combination of CSS gradients and framer-motion to create a visually engaging experience. On hover, the card tilts, a subtle glow follows the cursor, and the product image animates smoothly.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Card to your project and fits it to your theme.

Code

How Product Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ProductHighlightCard } from "@/components/ui/product-card"; // Adjust path as needed
import { CircuitBoard } from "lucide-react";

export default function ProductHighlightCardDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-8">
      <ProductHighlightCard
        category="Electronic"
        categoryIcon={<CircuitBoard className="h-5 w-5" />}
        title="Connectors"
        description="Fast charging and reliable connection for all your devices. Compact, durable, and ready for everyday use."
        imageSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-b3aKXmNboBC5A2lhRgyEeUYJMuII0v.png&w=320&q=75" // Using a sample image URL
        imageAlt="White USB-C cable"
      />
    </div>
  );
}