---
title: Money
description: >-
  The `Money` component renders a string of the Storefront API's[MoneyV2
  object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)
  according to the `locale` in the [`ShopifyProvider`
  component](/api/hydrogen/components/global/shopifyprovider).

  The component outputs a `<div>`. You can [customize this
  component](https://api/hydrogen/components#customizing-hydrogen-components)
  using passthrough props.
api_version: 2024-07
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/2024-07/components/money'
  md: 'https://shopify.dev/docs/api/hydrogen-react/2024-07/components/money.md'
---

# Money

The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](https://shopify.dev/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.

## Props

* data

  PartialDeep\<MoneyV2, {recurseIntoArrays: true}>

  required

  An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2).

* as

  ComponentGeneric

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

* measurement

  PartialDeep\<UnitPriceMeasurement, {recurseIntoArrays: true}>

  A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2024-07/objects/unitpricemeasurement).

* measurementSeparator

  ReactNode

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

* withoutCurrency

  boolean

  Whether to remove the currency symbol from the output.

* withoutTrailingZeros

  boolean

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

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  export default function ProductMoney({product}) {
    const price = product.variants.nodes[0].price;

    return <Money data={price} />;
  }
  ```

  ##### TypeScript

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

  export default function ProductMoney({product}: {product: Product}) {
    const price = product.variants.nodes[0].price;

    return <Money data={price} />;
  }
  ```

## Related

[- useMoney](https://shopify.dev/api/hydrogen-react/hooks/useMoney)