# FullPageView component for Stripe Apps

Use FullPageView to implement the full-page viewport in Stripe Apps

# v9


To add the `FullPageView` component to your app:

```js
import {FullPageView} from '@stripe/ui-extension-sdk/ui';
```

The `FullPageView` component provides a standardized way to implement the `stripe.dashboard.fullpage` viewport by rendering a Dashboard page header with action buttons and a main slot whose content can be customized. Using `FullPageView` makes your Stripe App UI almost indistinguishable from other Dashboard pages.

## Recommended UI patterns

### Tabs

Although you can customize the content of the `FullPageView` component using a full set of [Stripe Apps UI components](https://docs.stripe.com/stripe-apps/components.md), we recommend you implement a *Tabs* pattern that follows many existing first-party Dashboard pages. Use `Tabs` and `Tab` from [`@stripe/ui-extension-sdk/ui/next`](https://docs.stripe.com/stripe-apps/next-ui-components.md) to organize page content into sections, displaying one panel of content at a time while allowing users to navigate between them.

## Integration with Dashboard routing

### Link to Full-page route

To navigate users to your app’s full-page view from another viewport (for example, from the drawer) pass a [route descriptor](https://docs.stripe.com/stripe-apps/route-descriptors.md) to the `href` prop of [`Link`](https://docs.stripe.com/stripe-apps/components/link.md) or [`Button`](https://docs.stripe.com/stripe-apps/components/button.md):

```tsx
import {Link} from '@stripe/ui-extension-sdk/ui';

export function FullPageLink() {
  return (
    <Link
      href={{
        name: 'fullPage',
      }}
    >
      Open full-page app
    </Link>
  );
}
```

## Basic

The following example demonstrates how to use the `FullPageView` component, where a different React view is rendered for each tab.

### FullPageView props

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

  The contents of the component.                                                                                                               |
| `pageAction` | (Optional)
  `FullPageAction | undefined`

  A page action.

  Related types: [FullPageAction](https://docs.stripe.com/stripe-apps/components/fullpageview.md#fullpageaction). |

### FullPageAction

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

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

  An event handler for the action. |


## 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)