# Defaults: OrderDetail (/themes/sdk/reference/customer/defaults-2)

```ts
import { … } from '@poltura/theme-sdk/customer';
```

## `OrderDetail` [#orderdetail]

One order's page: status, documents, products with digital key delivery, totals, returns, downloads and addresses.

```ts
OrderDetail(props: OrderDetailProps): ReactElement | null
```

**Props:** [`OrderDetailProps`](/themes/sdk/reference/customer/types-3#orderdetailprops)

<Tab value='Example'>

```tsx
import { OrderDetail } from '@poltura/theme-sdk/customer';

export function OrderPage({ id }: { id: string }) {
  return <OrderDetail id={id} className='mx-auto max-w-4xl' />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/order-detail.tsx"
import type { ReactElement } from 'react';
import {
  OrderCardSkeleton,
  OrderDetailScope,
  OrderDownloads,
  OrderInfo,
  OrderItems,
  OrderReturns,
  OrderSummaryHeader,
  OrderTotals,
  type OrderDetailProps,
} from '@poltura/theme-sdk/customer';
import { cn } from '@poltura/theme-sdk/ui';

export function OrderDetail({ id, className }: OrderDetailProps): ReactElement | null {
  return (
    <OrderDetailScope id={id} fallback={<OrderCardSkeleton className={className} />}>
      <div className={cn(className)}>
        <div className='space-y-8'>
          <OrderSummaryHeader />
          <OrderItems />
          <OrderTotals />
          <OrderReturns />
          <OrderDownloads />
          <OrderInfo />
        </div>
      </div>
    </OrderDetailScope>
  );
}
```

</Tab>


**See also:** [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope), [`OrderItems`](/themes/sdk/reference/customer/parts-2#orderitems)