Components
Loading preview...
The ProductImageCard component is a modern, interactive product viewer built entirely with shadcn/ui components. It presents a clean, mobile-inspired layout featuring a main product image and a vertical carousel of selectable thumbnails. Users can switch between product views using the thumbnail list or next/previous buttons, offering an intuitive browsing experience similar to e-commerce detail pages. The design is fully responsive, adapting seamlessly across devices, and maintains accessibility with keyboard navigation and focus states. With configurable titles, images, and controls, this component provides an elegant, reusable way to showcase products or visual assets in any modern interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/product-image-card// app/product-demo/page.tsx
import { ProductImageCard } from "@/components/ui/product-image-card";
import type { ProductImage } from "@/components/ui/product-image-card";
export default function Page() {
const images: ProductImage[] = [
{
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/v1.png",
alt: "Front view",
},
{
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/v2.png",
alt: "Back view",
},
{
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/v3.png",
alt: "Side angle",
},
{
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/v4.png",
alt: "Detail patch",
},
{
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/v1.png",
alt: "Other view",
}
];
return (
<main>
<div className="container mx-auto max-w-5xl px-4">
<ProductImageCard title="Product Details" images={images} initialIndex={0} />
</div>
</main>
);
}