Components
Loading preview...
The ProductCard component is a fully customizable e-commerce card built with shadcn/ui, Tailwind CSS, and Framer Motion. It provides a modern, responsive, and theme-aware product showcase with interactive features, designed to work seamlessly in both light and dark modes. Key Features: -> Image carousel with smooth fade animations -> Dynamic badges for New, Best Seller, or Discount labels -> Wishlist toggle with visual feedback -> Selectable color swatches and size options -> Rating & reviews display with free shipping indicator -> Add to Cart button with loading and success states -> Light & dark mode support using shadcn’s theme system -> Polished UI with hover shadows, rounded corners, and fluid transitions This component is ideal for online stores, product listings, and landing pages, where both visual quality and user experience matter. It follows the shadcn/ui design pattern of separating reusable logic from demo usage, ensuring scalability and maintainability.
@beratberkay
npx shadcn@latest add https://21st.dev/r/beratberkayg/product-card-1import { ProductCard } from "@/components/ui/product-card-1";
export default function DemoOne() {
return <ProductCard name="Nike Air Force"
price={129.99}
originalPrice={169.99}
rating={4.7}
reviewCount={325}
discount={25}
freeShipping
isNew
isBestSeller
colors={["#1e293b", "#f43f5e", "#0ea5e9", "#10b981"]}
sizes={["38", "39", "40", "41", "42", "43"]}
images={[
"https://images.unsplash.com/photo-1543508282-6319a3e2621f?q=80&w=1315&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1656230259229-aa2634e3352c?q=80&w=1350&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1579338559194-a162d19bf842?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
]} />;
}