UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Product Detail Page

blockcommerce
Boilerplate repo

Flagship e-commerce product detail page with multi-angle gallery, finish & cable selectors, stock urgency counter, warranty upsell, flash sale countdown bar, frequently bought together bundle, technical specs sheet, customer reviews breakdown, and community Q&A.

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/product-detail-page.json
Named registry:npx shadcn-vue@latest add @uipkge/product-detail-pageInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

ProductVariant
interface ProductVariant {
  id: string
  name: string
  colorHex: string
  sku: string
  inStock: boolean
  stockCount: number
  price: number
  originalPrice: number
  images: { id: string; url: string; alt: string }[]
}

npm dependencies

lucide-vue-next

Files installed (3)

  • app/components/blocks/ProductDetailPage.vue2.6 kB
    <script setup lang="ts">
import { computed, ref } from 'vue'
import { ChevronRight } from 'lucide-vue-next'

// Import sub-blocks to compose the canonical enterprise PDP
import FlashSaleOfferBar from '../flash-sale-offer-bar/FlashSaleOfferBar.vue'
import TechnicalSpecsSheet from '../technical-specs-sheet/TechnicalSpecsSheet.vue'
import ProductQaCommunity from '../product-qa-community/ProductQaCommunity.vue'
import CustomerReviews from '../customer-reviews/CustomerReviews.vue'
import FrequentlyBoughtTogether from '../frequently-bought-together/FrequentlyBoughtTogether.vue'
import ProductGalleryBuyBox from './ProductGalleryBuyBox.vue'
import { variants } from './product-variants'

const selectedVariantId = ref(variants[0].id)

const currentVariant = computed(() => {
  return variants.find((v) => v.id === selectedVariantId.value) || variants[0]
})

function handleSelectVariant(id: string) {
  selectedVariantId.value = id
}
</script>

<template>
  <div data-slot="product-detail-page" class="bg-background text-foreground w-full space-y-10">
    <!-- Breadcrumb Navigation Bar -->
    <nav class="text-muted-foreground flex items-center gap-1.5 text-xs">
      <span class="hover:text-foreground cursor-pointer">Storefront</span>
      <ChevronRight class="size-3.5" />
      <span class="hover:text-foreground cursor-pointer">Pro Audio & Reference</span>
      <ChevronRight class="size-3.5" />
      <span class="hover:text-foreground cursor-pointer">Planar Magnetic</span>
      <ChevronRight class="size-3.5" />
      <span class="text-foreground font-medium">APX-950-PRO Reference Monitor</span>
    </nav>

    <!-- Main Hero Split: Gallery & Buy Box -->
    <ProductGalleryBuyBox :selected-variant-id="selectedVariantId" :on-select-variant="handleSelectVariant" />

    <!-- Section 2: Flash Sale & Multi-Buy Tier Deal Bar -->
    <div class="space-y-3">
      <FlashSaleOfferBar
        saleTitle="Audio Pro Week: Limited Master Batch 04"
        :claimedPercent="82"
        :itemsLeft="currentVariant.stockCount"
      />
    </div>

    <!-- Section 3: Frequently Bought Together Bundle -->
    <div class="space-y-4">
      <FrequentlyBoughtTogether />
    </div>

    <!-- Section 4: Engineering & Technical Specifications Sheet -->
    <div class="space-y-4">
      <TechnicalSpecsSheet modelNumber="APX-950-PRO" revision="Studio Edition 2026" />
    </div>

    <!-- Section 5: Verified Customer Reviews & Photo Breakdown -->
    <div class="space-y-4">
      <CustomerReviews />
    </div>

    <!-- Section 6: Customer & Staff Q&A Community -->
    <div class="space-y-4">
      <ProductQaCommunity productName="Apex Pro Reference Planar Headphones" />
    </div>
  </div>
</template>
  • app/components/blocks/ProductGalleryBuyBox.vue14 kB
  • app/components/blocks/product-variants.ts2.8 kB

Raw manifest:https://uipkge.dev/r/vue/product-detail-page.json