# Defaults: ProductHeader (/themes/sdk/reference/product/defaults-5)

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

## `ProductHeader` [#productheader]

The product page's heading block: tags, the title, the maker and SKU, and the rating with its review count.

```ts
ProductHeader(props: ProductHeaderProps): ReactElement | null
```

**Props:** [`ProductHeaderProps`](/themes/sdk/reference/product/types-7#productheaderprops)

<Tab value='Example'>

```tsx
import { ProductHeader } from '@poltura/theme-sdk/product';

export function Heading() {
  return <ProductHeader vendorLabel='Brand' skuLabel='SKU' />;
}
```

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

```tsx title="source/product-header.tsx"
import type { ReactElement } from 'react';
import { Star } from 'lucide-react';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import {
  ProductBadges,
  ProductTrustBadge,
  useOptionalProductPage,
  type ProductHeaderProps,
} from '@poltura/theme-sdk/product';
import { AppSlot } from '@poltura/theme-sdk/slots';
import { cn } from '@poltura/theme-sdk/ui';

const SHOWN_TAGS = 3;
const STARS = [1, 2, 3, 4, 5] as const;

export function ProductHeader({
  showReviewsSummary = true,
  vendorLabel,
  skuLabel,
  className,
}: ProductHeaderProps): ReactElement | null {
  const page = useOptionalProductPage();
  const t = useTranslations('product');
  if (page === null) return null;
  const { product } = page;
  const tags = product.tags.slice(0, SHOWN_TAGS);
  const vendor = product.vendor;
  const sku = product.variants.find((variant) => variant.sku)?.sku ?? null;
  const stats = page.reviewsSeed?.stats ?? null;
  const reviewCount = stats?.count ?? 0;
  const rating = stats?.average ?? 0;
  const heading = (
    <div className='space-y-3 sm:space-y-4 @container'>
      <div className='flex flex-wrap items-center gap-2'>
        {tags.map((tag) => (
          <span
            key={tag}
            className='px-2 py-0.5 rounded-md bg-muted text-muted-foreground text-[11px] sm:text-xs font-medium uppercase tracking-wide hover:bg-muted/80 transition-colors cursor-pointer'
          >
            {tag}
          </span>
        ))}
      </div>
      <div className='flex flex-col gap-1.5 sm:gap-2 items-start'>
        <ProductBadges badges={product.badges} placement='page' />
        <div className='flex flex-wrap items-center gap-3 gap-y-1.5'>
          <ProductTrustBadge />
          <AppSlot name='product.badges' className='contents' />
        </div>
        <h1 className='font-black text-foreground leading-[1.05] break-words text-[clamp(1.75rem,7.5cqw,3rem)] 2xl:text-[clamp(2.25rem,8cqw,4rem)]'>
          {product.title}
        </h1>
        {vendor || sku ? (
          <div className='flex flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:text-sm text-muted-foreground'>
            {vendor ? (
              <span className='break-words'>
                {vendorLabel ? `${vendorLabel}: ` : null}
                <span className='font-semibold text-foreground'>{vendor}</span>
              </span>
            ) : null}
            {vendor && sku ? (
              <span className='w-px h-3.5 bg-border/50 shrink-0' aria-hidden />
            ) : null}
            {sku ? (
              <span className='break-words'>
                {skuLabel ? `${skuLabel}: ` : null}
                <span className='font-medium tabular-nums'>{sku}</span>
              </span>
            ) : null}
          </div>
        ) : null}
      </div>
      {showReviewsSummary && reviewCount > 0 ? (
        <div className='flex flex-wrap items-center gap-2 sm:gap-4'>
          <div className='flex items-center gap-1 shrink-0'>
            {STARS.map((star) => (
              <Star
                key={star}
                className={cn(
                  'w-4 h-4',
                  star <= Math.round(rating)
                    ? 'fill-primary text-primary'
                    : 'fill-muted text-muted',
                )}
              />
            ))}
          </div>
          <span className='text-sm font-medium break-words'>
            {rating.toFixed(1)}/5{' '}
            <span className='text-muted-foreground'>{t('reviews', { reviewCount })}</span>
          </span>
        </div>
      ) : null}
    </div>
  );
  return className === undefined ? heading : <div className={className}>{heading}</div>;
}
```

</Tab>


**See also:** [`useProductPage`](/themes/sdk/reference/product/hooks-2#useproductpage)