Page components

These form the main structure of pages in our dashboards.

Each route would usually use a structure like this, using <Page.Header> and <Page.Section>.

<>
	<Page.Header>
		<h1>Manage your plan</h1>
		<p>Here you can upgrade, downgrade and download your invoices.</p>
	</Page.Header>
	<Page.Section>
		<Card>Some content</Card>
		<Card>Some more content</Card>
	</Page.Section>
</>

Full app structure example

There is also <Page.Main>, which can be used to wrapped around your routes:

import { Page } from '@nearst/ui';
 
return (
	<>
		<MyAppLayout>
			<MyAppNavigation>{/* Sidebar content here */}</MyAppNavigation>
			<Page.Main>
				<ErrorBoundary>
					<Page.Header>{/* Page header content */}</Page.Header>
					<Page.Section>{/* Page body content */}</Page.Section>
				</ErrorBoundary>
			</Page.Main>
		</MyAppLayout>
	</>
);

Components

Page.Header

The header of a page, usually containing a title and a description.

Props:

• children: The content of the header
• className (optional): Additional classes to apply to the header

Page.Section

A section of page body content. Applies padding to the top and bottom of the section.

Props:

• children: The content of the header
• className (optional): Additional classes to apply to the section

Page.Main

The main content of a page. This is the main container for the page content. You usually use this on the top level of your app.

Props:

• children: The content of the main container
• className (optional): Additional classes to apply to the main container