Product Details
A collection of 4 production-ready, high-converting, fully responsive E-commerce Product Details components designed with unique layout architectures, glassmorphism cards, bento hero showcases, and colorway image synchronization.
ProductDetails adapts seamlessly across mobile screens, tablets, and desktop viewports, with support for image slider arrows, color-synced previews, stock urgency bars, specs tabs, and checkout CTAs.Color Swatch Synced Image Gallery Details
- Use
variant"color-sync-gallery" - selecting a colorway swatch dynamically updates the main product image without sliders or thumbnails.
- Use
zoomMode"inner" | "side" - switch between inside-frame image zoom ('inner') or right-side HD portal zoom ('side').
Modern Split Gallery Slider Details
- Use
variant"modern-split-gallery" - features floating left/right slider arrows over main image, colorways, stock urgency bar, and specs tabs.
Floating Glassmorphism Card Details
- Use
variant"floating-card-glass" - clean floating card layout with US shoe size pills and express shipping.
Bento Editorial Showcase Details
- Use
variant"bento-editorial-showcase" - features a full-bleed dark hero image backdrop with compact buy panel.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Product Details
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Nothing beyond the shared setup — Product Details needs only the cn helper and lucide-react, which the installation guide already put in place.
Features
Discover the key capabilities of the
ProductDetails component:4 Unique Responsive Footwear Layouts
Includes Modern Split Gallery Slider, Floating Glass Card, Bento Editorial Showcase, and Color-Synced Swatch Gallery.
100% Screen & Device Responsive
Fluid Tailwind CSS grid and flex layouts built to adapt from 320px mobile viewports up to 4K ultra-wide screens.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "color-sync-gallery" | "modern-split-gallery" | "floating-card-glass" | "bento-editorial-showcase" | "color-sync-gallery" | Selects layout architecture from the 4 available variants: "color-sync-gallery", "modern-split-gallery", "floating-card-glass", or "bento-editorial-showcase". |
zoomMode | "inner" | "side" | "inner" | Controls HD image zoom mode for 1st variant (color-sync-gallery). "inner" magnifies directly within the hero frame; "side" projects a 2.8x HD lens window to the right of the image on hover. |
title | string | "Nike Air Max Pulse 2026" | Main product title heading displayed across all variants. |
price | string | "$189.99" | Current product retail or discounted selling price string. |
originalPrice | string | "$240.00" | Original list price string displayed with line-through styling to show savings. |
description | string | "Engineered with reactive Air Cushioning..." | Short description or marketing bio summary text. |
badge | string | "Special Edition" | Promotional badge label text (e.g. "Special Edition", "20% OFF", "Best Seller"). |
rating | number | 4.9 | Product review score out of 5 stars (renders filled yellow star icons). |
reviewsCount | number | 284 | Total count of verified customer reviews. |
images | string[] | DEFAULT_IMAGES | Array of high-resolution product image URLs for image slider arrows, thumbnail galleries, and colorway syncing. |
colors | ProductColor[] | DEFAULT_COLORS | Array of colorway objects (containing name, class, bgClass, image). Selecting a color swatch dynamically updates active state and swaps main preview image in "color-sync-gallery". |
sizes | string[] | DEFAULT_SIZES | Array of shoe or apparel size strings (e.g. ["US 8", "US 9", "US 10", "US 11", "US 12"]) for size picker grids. |
className | string | "" | Custom Tailwind CSS class overrides applied to wrapper container section. |