---
title: CartLineQuantity
description: >-
  The <CartLineQuantity/> component renders a span (or another element /
  component that can be customized by the as prop) with the cart line's
  quantity.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlinequantity
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlinequantity.md
api_name: hydrogen-react
---

# Cart​Line​Quantity

The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.

It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.

#### Props

* **as**

  **ComponentGeneric**

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

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react';

  export function Example({line}) {
    return (
      <CartLineProvider line={line}>
        <CartLineQuantity />
      </CartLineProvider>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react';
  import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';

  export function Example({line}: {line: CartLine}) {
    return (
      <CartLineProvider line={line}>
        <CartLineQuantity />
      </CartLineProvider>
    );
  }
  ```

***

## Related

[useCartLine](https://shopify.dev/docs/api/hydrogen-react/2026-04/hooks/usecartLine)

[CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2026-04/components/cart/cartlinequantityAdjustButton)

***