Components
E-commerce Product Detail
Features This Product Detail component includes:
Interactive Image Gallery
Large main image with thumbnails Previous/next navigation arrows Thumbnails with active state indicator Product Information
Name, price, and rating display Tabbed content for description, details, and shipping Wishlist functionality Customization Options
Color selection with visual indicators Size selection with active states Quantity selector Purchase Actions
Add to cart button Buy now button Responsive Design
Mobile-friendly layout that adapts to different screen sizes Proper spacing and typography for all viewports Accessibility Features
Proper ARIA attributes Keyboard navigation support Focus management Screen reader friendly markup Dark Mode Support
Complete styling for both light and dark themes The component uses Tailwind CSS for styling and includes all the necessary SVG icons embedded directly in the code for portability.
import ProductDetail from "@/components/ui/e-commerce-product-detail";
export default function DemoOne() {
return <ProductDetail />;
}