---
title: ProductVariantPrice
description: >-
  A component for displaying product pricing with support for discounts and
  custom styling.
source_url:
  html: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/productvariantprice
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/productvariantprice.md
---

# ProductVariantPrice

A component for displaying product pricing with support for discounts and custom styling.

#### Props

* **amount**

  **number | string**

  **required**

* **className**

  **string**

* **compareAtPriceAmount**

  **number | string**

* **compareAtPriceCurrencyCode**

  **string**

* **currencyCode**

  **string**

* **currentPriceClassName**

  **string**

* **originalPriceClassName**

  **string**

Examples

## Preview

![productvariantprice](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/ProductVariantPrice-DL6-fqjv.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {ProductVariantPrice} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ProductVariantPrice
        amount="29.99"
        currencyCode="USD"
      />
    )
  }
  ```

* ####

  ##### Description

  A basic product price display

  ##### tsx

  ```tsx
  import {ProductVariantPrice} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ProductVariantPrice
        amount="29.99"
        currencyCode="USD"
      />
    )
  }
  ```

* ####

  ##### Description

  A product price with discount showing compare at price

  ##### tsx

  ```tsx
  import {ProductVariantPrice} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ProductVariantPrice
        amount="24.99"
        currencyCode="USD"
        compareAtPriceAmount="39.99"
      />
    )
  }
  ```

* ####

  ##### Description

  A product price with custom styling classes

  ##### tsx

  ```tsx
  import {ProductVariantPrice} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ProductVariantPrice
        amount="89.99"
        currencyCode="USD"
        compareAtPriceAmount="119.99"
        currentPriceClassName="text-2xl font-bold text-green-600"
        originalPriceClassName="text-lg text-red-500 line-through"
        className="gap-3 p-4 bg-gray-50 rounded-lg"
      />
    )
  }
  ```

***