FreeEcommerce

Product Showcase Card

Use this component for marketplaces, template shops, digital products, feature stores, and pricing add-ons.

ReactTailwind CSSMotionProduct

Launch Kit

Product UI starter pack

$49

Overview

A premium product card with gradient media, price, description, and buy action.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ProductShowcaseCard />

Product Showcase Card.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function ProductShowcaseCard() {
  return (
    <motion.div whileHover={{ y: -6 }} className="w-64 rounded-2xl border border-white/10 bg-zinc-950 p-4 text-white">
      <div className="mb-4 h-28 rounded-xl bg-gradient-to-br from-lime-300/30 via-sky-400/20 to-purple-500/30" />
      <p className="text-sm font-bold">Launch Kit</p>
      <p className="mt-1 text-xs text-zinc-400">Product UI starter pack</p>
      <div className="mt-4 flex items-center justify-between">
        <span className="text-xl font-black">$49</span>
        <button className="rounded-md bg-lime-300 px-3 py-1.5 text-xs font-bold text-zinc-950">Buy</button>
      </div>
    </motion.div>
  );
}