---
title: CartCost
description: "
\ 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 ``
\ "
api_version: 2026-01
api_name: hydrogen-react
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
---
# 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 ``
## Props
* **amountType**
**'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\**
A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2026-01/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 {CartCost} from '@shopify/hydrogen-react';
export default function CartTotals() {
return (
<>
Subtotal:
Tax:
Total:
);
}
```
##### TypeScript
```tsx
import {CartCost} from '@shopify/hydrogen-react';
export default function CartTotals() {
return (
<>
Subtotal:
Tax:
Total:
);
}
```