---
title: CartCost
description: >-
  The CartCost component renders a Money component with the cost associated with
  the amountType prop.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartcost'
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartcost.md
api_name: hydrogen-react
---

# Cart​Cost

The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.

If no `amountType` prop is specified, then it defaults to `totalAmount`.

Depends on `useCart()` and must be a child of `<CartProvider/>`

#### Props

* **amount​Type**

  **'total' | 'subtotal' | 'tax' | 'duty'**

  A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`.

* **as**

  **ComponentGeneric**

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

* **children**

  **React.ReactNode**

  Any `ReactNode` elements.

* **measurement**

  **PartialDeep\<UnitPriceMeasurement, {recurseIntoArrays: true}>**

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

* **measurement​Separator**

  **ReactNode**

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

* **without​Currency**

  **boolean**

  Whether to remove the currency symbol from the output.

* **without​Trailing​Zeros**

  **boolean**

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

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  export default function CartTotals() {
    return (
      <>
        <div>
          Subtotal: <CartCost amountType="subtotal" />
        </div>
        <div>
          Tax: <CartCost amountType="tax" />
        </div>
        <div>
          Total: <CartCost />
        </div>
      </>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {CartCost} from '@shopify/hydrogen-react';

  export default function CartTotals() {
    return (
      <>
        <div>
          Subtotal: <CartCost amountType="subtotal" />
        </div>
        <div>
          Tax: <CartCost amountType="tax" />
        </div>
        <div>
          Total: <CartCost />
        </div>
      </>
    );
  }
  ```

***