About
Product Detail Page This component displays the full details of a product, including an image gallery, pricing, description, and seller information. It is designed to be highly reusable, with all content passed in via props.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Detail Page to your project and fits it to your theme.
Code
How Product Detail Page is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
// demo.tsx
import { ProductDetailPage, ProductDetailPageProps } from "@/components/ui/product-detail-page";
import { Tag, Ruler, Users, Info } from "lucide-react";
// Mock data to be passed into the component
const demoProps: ProductDetailPageProps = {
breadcrumbs: [
{ label: "Market", href: "#" },
{ label: "Clothing", href: "#" },
{ label: "Lightweight Brown Bomber Jacket", href: "#" },
],
product: {
name: "Lightweight Brown Bomber Jacket",
price: 70,
shippingCost: 5.60,
currency: "€",
images: [
"https://cdn.21st.dev/assets/mirror/eb/ebd000adfb789b3ed9ac53c3169252365c03abc8e73f029721252182c56fa5bc.jpg",
"https://cdn.21st.dev/assets/mirror/fc/fc6e560ff7f271b1bec59d5552d94fe37dfcfee410a5e3b0dc85ee73e24505d5.jpg",
"https://cdn.21st.dev/assets/mirror/c6/c6680b1a9b6bac5b55fc7662f048fb8c5fcf96f5d9c025122a86f4bf278ac157.jpg",
],
description: "A stylish light bomber jacket, perfect for the transitional seasons. Made from breathable, water-resistant material with a zip-up front, side pockets, and a sleeve zip pocket for small essentials. Ideal for layering in spring or fall.",
tags: [
{ label: "Brown", icon: Tag },
{ label: "L Size", icon: Ruler },
{ label: "Women", icon: Users },
{ label: "New", icon: Info },
],
},
seller: {
name: "Maria Johansson",
avatarUrl: "https://cdn.21st.dev/assets/mirror/d0/d066ce85ffca59255ef063ca3ebbcd4f31531ad3ea85bd54f59b79568d4c0fb3.jpg",
rating: 4.9,
},
};
// The demo component that renders the product page
const ProductPageDemo = () => {
// Data for the "You might also like" section
const relatedProducts = [
{ id: 1, src: "https://cdn.21st.dev/assets/mirror/b9/b91d9fb0af79f9d798778b443b0e21a2d568f4a535467ff44f0f2230cc101628.jpg", alt: "Similar Jacket" },
{ id: 2, src: "https://cdn.21st.dev/assets/mirror/a9/a9ef4cca489ec66ac09e0d6c0965c8921110fbfca693eeba789fcee3f1520142.jpg", alt: "Running Shoes" },
{ id: 3, src: "https://cdn.21st.dev/assets/mirror/52/52ce6c0662defdfc4475e2f19d48611f8f962f44c3bd44d5c11d706fd5689e68.jpg", alt: "Modern Watch" },
{ id: 4, src: "https://cdn.21st.dev/assets/mirror/d1/d194ec77b4e949839a73249ef95d2c674912c6ec5cafb212c8d7b6d00e918565.jpg", alt: "Stylish Sunglasses" },
];
return (
<div className="bg-muted/30">
{/* This container simulates the card-like appearance from the UI design */}
<div className="max-w-screen-xl mx-auto p-4 sm:p-6 md:p-8">
<div className="bg-card rounded-2xl shadow-sm">
<ProductDetailPage
product={demoProps.product}
seller={demoProps.seller}
breadcrumbs={demoProps.breadcrumbs}
/>
{/* "You might also like" section with real images */}
<div className="px-4 md:px-8 pb-8">
<h2 className="text-2xl font-bold tracking-tight">You might also like</h2>
<div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
{relatedProducts.map((item) => (
<div key={item.id} className="bg-muted/50 rounded-lg aspect-square overflow-hidden group">
<img
src={item.src}
alt={item.alt}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
};
export default ProductPageDemo;