---
title: useCartLine
description: |2-

      The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
    
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/usecartline'
  md: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/usecartline.md'
---

# use​Cart​Line

The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.

## use​Cart​Line()

`useCartLine` must be a descendent of a `CartProvider` component.

### Returns

* CartLinePartialDeep

  ### CartLinePartialDeep

  * PartialDeep< CartLine | ComponentizableCartLine, {recurseIntoArrays: true} >

### CartLinePartialDeep

```ts
PartialDeep<
  CartLine | ComponentizableCartLine,
  {recurseIntoArrays: true}
>
```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  export function CartWrapper({cart}) {
    const firstCartLine = cart.lines.nodes[0];
    return (
      <CartLineProvider line={firstCartLine}>
        <CartLineQuantity />
      </CartLineProvider>
    );
  }

  function CartLineQuantity() {
    const cartLine = useCartLine();

    return <div>{cartLine.quantity}</div>;
  }
  ```

  ##### TypeScript

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

  export function CartWrapper({cart}: {cart: Cart}) {
    const firstCartLine = cart.lines.nodes[0];
    return (
      <CartLineProvider line={firstCartLine}>
        <CartLineQuantity />
      </CartLineProvider>
    );
  }

  function CartLineQuantity() {
    const cartLine = useCartLine();

    return <div>{cartLine.quantity}</div>;
  }
  ```

## Related

[- CartLineProvider](https://shopify.dev/api/hydrogen-react/components/CartLineProvider)