Generic PDP

Product detail page core with variant selection, quantity, and buy actions.

Quickstart

  1. Ensure the registry is set up in Installation.
  2. Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-pdp

Usage

import { GenericPdp } from "@/components/systems/storefront/generic-pdp"

<GenericPdp
  product={product}
  onAddToCart={({ product, variant, quantity }) => addItem(product, variant, quantity)}
/>

API Reference

PropTypeNotes
productStorefrontPdpProductProduct with variants/gallery
initialVariantIdstring | numberDefault selected variant
initialQuantitynumberInitial quantity in buy box
onAddToCart(payload) => voidCart integration callback
← Previous: Generic CatalogNext: Generic Cart