---
title: CartLineProvider
description: The CartLineProvider component creates a context for using a cart line.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlineprovider
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlineprovider.md
api_name: hydrogen-react
---

# Cart​Line​Provider

The `CartLineProvider` component creates a context for using a cart line.

#### Props

* **children**

  **ReactNode**

  **required**

  Any `ReactNode` elements.

* **line**

  **CartLinePartialDeep**

  **required**

  A cart line object.

### 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

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

***