> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <ProductDescriptionScreen />

> Full-screen product detail view with modifiers, quantity, and add-to-cart action.

# ProductDescriptionScreen

<Snippet file="api-key-location.mdx" />

A full-screen overlay that shows detailed product information including image, description, modifier groups, quantity selector, and an add-to-cart button with running total.

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { ProductDescriptionScreen } from '@/components/ProductDescriptionScreen'
```

## Usage

```tsx theme={null}
<ProductDescriptionScreen
  product={selectedProduct}
  onAddToCart={handleAddToCart}
  onClose={handleClose}
/>
```

## Props

**product** `Product` *required*

The product to display, including all modifier groups.

**onAddToCart** `(item: CartItem) =\> void` *required*

Callback fired when the user confirms selections and adds the item to cart.

**onClose** `() =\> void` *required*

Callback to dismiss the screen.

## Behavior

* Displays product hero image with parallax scroll effect
* Renders all modifier groups using `ModifierGroup` components
* Shows running price total that updates as modifiers are selected
* Validates required modifier groups before enabling the add button
* Supports special instructions text input at the bottom


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.