# ProductPrice

The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
### Example code

```jsx
import {ProductPrice} from '@shopify/hydrogen-react';

export function ProductPricing({product}) {
  return <ProductPrice data={product} priceType="compareAt" valueType="max" />;
}

```

```tsx
import {ProductPrice} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export function ProductPricing({product}: {product: Product}) {
  return <ProductPrice data={product} priceType="compareAt" valueType="max" />;
}

```



## Props


### ProductPricePropsForDocs


### as

value: `ComponentGeneric`

An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

### data

value: `PartialDeep<Product, {recurseIntoArrays: true}>`

A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product).

### measurementSeparator

value: `ReactNode`

Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.

### priceType

value: `'regular' | 'compareAt'`

The type of price. Valid values: `regular` (default) or `compareAt`.

### valueType

value: `'max' | 'min' | 'unit'`

The type of value. Valid values: `min` (default), `max` or `unit`.

### variantId

value: `string`

The ID of the variant.

### withoutCurrency

value: `boolean`

Whether to remove the currency symbol from the output.

### withoutTrailingZeros

value: `boolean`

Whether to remove trailing zeros (fractional money) from the output.

## Related
- [ProductProvider](/api/hydrogen-react/components/productprovider)
- [Money](/api/hydrogen-react/components/money)