# Product detail

A product page with a swipeable gallery, finish and size variants, add to bag that confirms in place, shipping, a reviews summary, and details.

- ID: `product-detail`
- Import: `animui/product-detail`
- Category: block
- Runtime exports: `ProductDetail`
- Declaration: `types/pro/product-detail.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: product-listing, cart-drawer

```tsx
import { ProductDetail } from 'animui/product-detail';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info product-detail` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface ProductDetailProps {
  product?: string | number | boolean | ReactNode;
  defaultFinish?: string | number | boolean | ReactNode;
  defaultSize?: string | number | boolean | ReactNode;
  onAddToCart?: () => void;
  onNotify?: () => void;
  onWishlistChange?: () => void;
  defaultCartCount?: string | number | boolean | ReactNode;
  maxQuantity?: string | number | boolean | ReactNode;
  currency?: string | number | boolean | ReactNode;
  locale?: string | number | boolean | ReactNode;
  className?: string;
}

export declare const ProductDetail: ComponentType<ProductDetailProps>;

export default ProductDetail;
```