# salla-order-shipments (https://docs.salla.dev/twilight/react/web-components/salla-order-shipments)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The `salla-order-shipments` component renders a per-shipment tracking breakdown
on the thank-you page for orders fulfilled as split shipments (2+ shipments).
It renders nothing for single-shipment orders, or when the store does not have the
`thankyou-page-multi-shipments` feature enabled.
Each shipment card shows the carrier logo, the tracking number with a copy button (or a placeholder text
until a number is assigned) and the product images.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-shipments>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderShipments } from '@salla.sa/twilight-components-react/order-shipments';
```

## Example [#example]

```tsx
import { SallaOrderShipments } from '@salla.sa/twilight-components-react/order-shipments';

export function Example() {
  return (
    <>
      <SallaOrderShipments />
      <SallaOrderShipments orderId="123456" />
    </>
  );
}
```

```html
<salla-order-shipments></salla-order-shipments>
<salla-order-shipments order-id="123456"></salla-order-shipments>
```

## Properties [#properties]

| Property  | Attribute  | Description                                                                                                                                                          | Type               | Default |
| --------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `orderId` | `order-id` | Id of the order to load shipments for. Defaults to the current page's id (`page.id` in the Salla config). Changing it clears the list and loads the shipments again. | `number \| string` |         |