# OverviewPage component for Stripe Apps

Use OverviewPage to implement overview-style layouts in Stripe Apps.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/overviewpage?app-sdk-version=8.

The `OverviewPage` component isn’t available in the selected SDK version.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/overviewpage?app-sdk-version=9.

To add the `OverviewPage` component to your app:

```js
import {OverviewPage, OverviewPageModule} from '@stripe/ui-extension-sdk/ui';
```

Overview pages provide a high level view of the important activity happening across an entire workload or feature area, and they serve as a starting point into sub-areas and workflows.

The `OverviewPage` component provides a layout for overview-style pages in Stripe Apps. It renders a two-column structure where you compose content using `OverviewPageModule` components. The primary column is required, but the secondary column is optional, allowing both single-column and two-column layouts.

> Use `OverviewPage` as the content of a [`FullPageView`](https://docs.stripe.com/stripe-apps/components/fullpageview.md) or inside a [`FullPageTab`](https://docs.stripe.com/stripe-apps/components/fullpagetabs.md).

## When to use

Use a *single-column layout* when you want to present focused, sequential content without distractions. This works well for:

- Progressive disclosure of information
- Linear workflows that require user attention
- Mobile-first experiences

Use a *two-column layout* when you have primary content alongside supporting information or actions. This works well for:

- Dashboard-style pages with primary metrics and secondary widgets
- Pages with main content and contextual help or resources
- Applications with primary workflows and quick access panels

## Layout structure

### OverviewPage

`OverviewPage` accepts `primaryColumn` and `secondaryColumn` props, with the second one being optional.

Both columns can accept a single element or multiple elements using React Fragment:

```jsx
import {OverviewPage, OverviewPageModule} from "@stripe/ui-extension-sdk/ui";

// Two-column layout
export function MyOverviewPage() {
  return (
    <OverviewPage
      primaryColumn={
        <OverviewPageModule title="Primary Content">
          <PrimaryContent />
        </OverviewPageModule>
      }
      secondaryColumn={
        <>
          <OverviewPageModule title="Auxiliary 1">
            <AuxiliaryContent1 />
          </OverviewPageModule>
          <OverviewPageModule title="Auxiliary 2">
            <AuxiliaryContent2 />
          </OverviewPageModule>
        </>
      }
    />
  );
}

// Single-column layout (secondaryColumn omitted)
export function MySingleColumnPage() {
  return (
    <OverviewPage
      primaryColumn={
        <OverviewPageModule title="Main Content">
          <MainContent />
        </OverviewPageModule>
      }
    />
  );
}
```

Each column’s inner elements must be wrapped with `OverviewPageModule`.

### OverviewPage props

| Property          | Type                                                                                                                      |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `primaryColumn`   | (Required)
  `React.ReactNode`

  The primary column of the overview page. One or more `OverviewPageModule` components.   |
| `secondaryColumn` | (Optional)
  `React.ReactNode`

  The secondary column of the overview page. One or more `OverviewPageModule` components. |

### OverviewPageModule

Only use this component within [`OverviewPage`](https://docs.stripe.com/stripe-apps/components/overviewpage.md#overviewpage), which provides basic primitives such as title, subtitle, and additional actions if needed.

Children of `OverviewPageModule` can be any UI component you need to create the desired interface.

```jsx
import {
  OverviewPage,
  OverviewPageModule,
  Box,
  Inline,
  BarChart,
} from "@stripe/ui-extension-sdk/ui";

export function PrimaryContent() {
  return (
    <OverviewPageModule
      title="Gross volume"
      subtitle="Monthly revenue overview"
      extraActions={[
        { label: "View report", onPress: () => {}, type: "primary" },
        { label: "Export", onPress: () => {}, type: "secondary" },
      ]}
    >
      <Box css={{ stack: "y", gap: "small" }}>
        <Inline css={{ color: "secondary", font: "caption" }}>
          Last 6 months
        </Inline>
        <Box css={{ width: "fill" }}>
          <BarChart
            data={[
              { month: "Sep", amount: 42000 },
              { month: "Oct", amount: 48500 },
              { month: "Nov", amount: 51200 },
              { month: "Dec", amount: 62000 },
              { month: "Jan", amount: 58400 },
              { month: "Feb", amount: 67300 },
            ]}
            x="month"
            y={{
              value: "amount",
              label: "Amount",
              format: { currency: "USD" },
            }}
          />
        </Box>
      </Box>
    </OverviewPageModule>
  );
}
```

### OverviewPageModule props

| Property       | Type                                                                                                                                                                                                                             |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`     | (Required)
  `React.ReactNode`

  The content of the module.                                                                                                                                                                     |
| `title`        | (Required)
  `string`

  The title of the module.                                                                                                                                                                                |
| `extraActions` | (Optional)
  `OverviewPageModuleAction[] | undefined`

  The extra actions of the module.

  Related types: [OverviewPageModuleAction](https://docs.stripe.com/stripe-apps/components/overviewpage.md#overviewpagemoduleaction). |
| `subtitle`     | (Optional)
  `string | undefined`

  The subtitle of the module.                                                                                                                                                                 |

### OverviewPageModuleAction

| Property   | Type                                                                                              |
| ---------- | ------------------------------------------------------------------------------------------------- |
| `label`    | (Required)
  `string`

  The label of the action.                                                 |
| `onPress`  | (Required)
  `() => void`

  An event handler for the action.                                     |
| `disabled` | (Optional)
  `boolean | undefined`

  Whether the action is disabled.                             |
| `type`     | (Optional)
  `("primary" | "secondary" | "destructive") | undefined`

  The type of the `Button`. |

## Examples

## Single column

A single-column layout with multiple modules (gross volume, past due invoices, recent transactions).

## Two columns—Basic

A minimal two-column layout with placeholder content.

## Two columns—Full example

A two-column layout with primary content on the left and supporting modules (tasks, insights, recents, quick links, resources) on the right.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)