Skip to main content

Page

This component should be used to wrap all pages in the dashboard. It provides a consistent layout as well as a context for the slot-based PageBlock system.

The typical hierarchy of a page is as follows:

Example

Tsx
import { Page, PageTitle, PageActionBar, PageLayout, PageBlock, Button } from '@vendure/dashboard';const pageId = 'my-page';export function MyPage() { return (   <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>     <PageTitle>My Page</PageTitle>     <PageActionBar>       <PageActionBarRight>         <Button>Save</Button>       </PageActionBarRight>     </PageActionBar>     <PageLayout>       <PageBlock column="main" blockId="my-block">         <div>My Block</div>       </PageBlock>     </PageLayout>   </Page> )}
Signature
function Page(props: Readonly<PageProps>): void

Parameters

props

parameterReadonly<PageProps>

The props used to configure the Page component.

Signature
interface PageProps extends ComponentProps<'div'> {    pageId?: string;    entity?: any;    form?: UseFormReturn<any>;    submitHandler?: any;}
  • Extends: ComponentProps<'div'>

pageId

propertystring

A string identifier for the page, e.g. "product-list", "review-detail", etc.

entity

propertyany

form

propertyUseFormReturn<any>

submitHandler

propertyany
Was this chapter helpful?
Report Issue
Edited Feb 2, 2026·Edit this page