ProductDetail

Code

import { ProductDetail } from "@fadymondy/nasaq/web";export function Page({ product }: { product: CommerceProduct }) {  return (    <ProductDetail      product={product}      currency="USD"      onAddToCart={async (variant, quantity) => {        await cart.add(variant.id, quantity); // return { error } to show a failure      }}    />  );}

Storefront · beta

Live examples and controls: ProductDetail in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/product-detail.json

The product page of a store. Give it a whole CommerceProduct and it renders the breadcrumb, a gallery, the title and rating, the price (with compare-at and percent off), the variant picker, a quantity stepper, stock and delivery lines, add to cart and buy now, wishlist and share, trust badges, a size guide, and the description, specifications and shipping sections. It holds no cart: onAddToCart(variant, qty) is the only way out. Slots take the reviews block and the related products.

The pieces are exported too: ProductGallery, ProductVariantPicker, ProductQuantityStepper and ProductSizeGuide, and the pure helpers behind them (initialSelection, selectOptionValue, imageForSelection, stockState, displayPrice, deliveryWindow, and more).

When to useCopy Anchor Link

• The page for one product with variants (colour, size) that are sold from a store.
• Any place a single product needs a buy box with live availability.

When not to useCopy Anchor Link

• A product in a shelf or grid: use ProductCard.
• A subscription plan: use PlanCard.
• Cart and checkout: they belong to the cart and checkout components.

ImportCopy Anchor Link

import { ProductDetail } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ProductDetail } from "@fadymondy/nasaq/web";

export function Page({ product }: { product: CommerceProduct }) {
  return (
    <ProductDetail
      product={product}
      currency="USD"
      onAddToCart={async (variant, quantity) => {
        await cart.add(variant.id, quantity); // return { error } to show a failure
      }}
    />
  );
}

AnatomyCopy Anchor Link

ProductDetail                  data-slot="product-detail"
├─ Breadcrumb                  optional
├─ ProductGallery              thumbnails, zoom, swipe, lightbox, video badge
└─ buy box
   ├─ title, brand, Rating (links to #reviews)
   ├─ price, compare-at, percent-off Badge
   ├─ ProductVariantPicker     radio group per option; optionAction holds the size guide link
   ├─ ProductQuantityStepper   clamped to stock and maxPerOrder
   ├─ stock line, delivery line with a city Select
   ├─ Add to cart, Buy now, wishlist, share
   └─ trust badges
sections                       Tabs from 768px, Accordion below (description, specifications, shipping)
reviews slot                   id="reviews"
related slot
sticky add bar                 phones only, after the main buttons scroll away

APICopy Anchor Link

ProductDetailCopy Anchor Link

Sub-componentsCopy Anchor Link

• ProductGallery: images, index?, defaultIndex?, onIndexChange?, zoom?, name?, labels?.
• ProductVariantPicker: product, selection, onSelectionChange, impossible?, optionAction?, invalid?, labels?. Sold-out values are crossed out and stay selectable.
• ProductQuantityStepper: value, onValueChange, max?, disabled?, labels?.
• ProductSizeGuide: guide (columns, rows, highlight?, footer?, title?, description?), selectedSize?, labels?.

ExamplesCopy Anchor Link

Arabic page with delivery by cityCopy Anchor Link

<ProductDetail
  product={product}
  currency="USD"
  delivery={{ cities: [{ id: "cairo", label: "القاهرة", etaDays: [1, 2], fee: 0 }], skipWeekdays: [5, 6] }}
  onAddToCart={add}
/>

Set the provider locale to ar; everything, including numbers and dates, follows.

Reviews in the slotCopy Anchor Link

<ProductDetail product={product} currency="USD" onAddToCart={add} reviews={<ProductReviews reviews={reviews} />} />

AccessibilityCopy Anchor Link

• Each option is a radio group (arrow keys move, Space picks). Sold-out values are announced as unavailable and drawn with a line, not colour alone.
• The gallery has previous and next buttons, arrow keys, a live position, and a lightbox dialog. Swipe is an extra, never the only way.
• The stock line, the add result and quantity limits are in live regions.
• Reduced motion turns off the zoom and slide transitions.

RTL & i18nCopy Anchor Link

• English and Arabic strings are built in; pass labels to override.
• Prices, SKUs, quantities and dates use <bdi> and locale digits. Swipe direction and the previous/next arrows mirror.
• The size table keeps measurements left to right.

Styling & tokensCopy Anchor Link

• Tokens only (text-foreground, bg-secondary, border-border, text-nq-*-text). Swatch colours come from CommerceOption values, which should be tokens or CSS colours from your data.
• Images show a token-coloured placeholder when missing or broken, and reserve their aspect ratio.

Do / Don'tCopy Anchor Link

• Do pass the whole product and let availability drive the picker.
• Do return { error } from onAddToCart when the cart refuses.
• Don't hide sold-out values: cross them out so shoppers know they exist.
• Don't compute stock or price yourself; use stockState and displayPrice.

RelatedCopy Anchor Link

• ProductReviews · ProductCard · Price · Rating

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-storefront-product-detail--docs