---
title: Product page example
description: Compose a responsive product management page with route links.
order: 30
toc:
  - id: page-tabs
    title: Page tabs
  - id: complete-example
    title: Complete example
---

## Page tabs {#page-tabs}

`PageTabs` follows the standard Root, List, Trigger, Indicator, and Content composition:

```tsx
<PageTabs defaultValue="overview" placement="top-start" variant="default">
  <PageTabsList aria-label="Product pages">
    <PageTabsExtra>
      <Button variant="ghost">Back</Button>
    </PageTabsExtra>
    <PageTabsTrigger value="overview">Overview</PageTabsTrigger>
    <PageTabsTrigger value="inventory">Inventory</PageTabsTrigger>
    <PageTabsTrigger value="settings">Settings</PageTabsTrigger>
    <PageTabsIndicator />
    <PageTabsExtra align="end">
      <Button variant="ghost">Help</Button>
    </PageTabsExtra>
  </PageTabsList>
  <PageTabsContent value="overview">Product overview</PageTabsContent>
  <PageTabsContent value="inventory">Inventory management</PageTabsContent>
  <PageTabsContent value="settings">Product settings</PageTabsContent>
</PageTabs>
```

`placement` combines `top | right | bottom | left` with `start | center | end`, for example `top-start`, `top-center`, or `left-end`. Top and bottom are horizontal; left and right are vertical. The suffix aligns the tabs group on its main axis.

`variant` accepts `line`, `card`, or `default`. `line` draws a foreground edge beneath the active Trigger, `card` joins bordered tabs to the content edge, and `default` renders a muted rounded track with a raised active surface. `PageTabsIndicator` follows the active Trigger automatically.

`PageTabsExtra` uses `align="start | end"` to occupy either edge of the List and defaults to `start`. Multiple extras may share an edge while retaining source order.

## Complete example {#complete-example}

```tsx
<PageContainer
  info={{
    breadcrumb: [
      { label: "Products", href: "/products" },
      { label: "Wireless headphones" },
    ],
    description: "Update details, inventory, and sales channels.",
    title: "Wireless headphones",
  }}
>
  <PageHeader>
    <PageBreadcrumb aria-label="Current location" />
    <PageHeading>
      <PageTitle />
      <PageDescription />
      <PageHeadingExtra align="end">
        <Button variant="outline">Preview</Button>
        <Button>Save</Button>
      </PageHeadingExtra>
    </PageHeading>
    <PageHeaderExtra>
      <ProductMetadata />
    </PageHeaderExtra>
  </PageHeader>
  <ProductRouteTabs />
  <PageSection aria-label="Product details">
    <ProductForm />
  </PageSection>
</PageContainer>
```