Product detailPro

• Gallery follows color
• Sold-out sizes
• Quantity and add to cart
• Size validation

• Store product pages.

• Product grids: use the product card.

Import it from @/components/blocks/product-detail after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { ProductDetail } from "@/components/blocks/product-detail";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ProductDetail />
    </main>
  );
}

• Colors and sizes are labelled radio groups; sold-out sizes are disabled and say so.
• Missing size shows an error with role="alert".

• Gallery images crossfade when the color changes.

• Gallery stacks above details below 768px.

• Use optimized images; only the active image is large.

• Stock per size lives in the product object; keep it in sync with your inventory.