PageLayout and PageHeader

Open in Playground

PageLayout fills the space left in its parent (it is flex-1), so the parent must be a full-height flex column, for example <div className="flex min-h-screen flex-col"> around the AppBar and the PageLayout. Without that, the page sits at the top of the window and, with themeToggle, the toggle can overlap the content. PageLayout does not set min-h-screen itself, because that would push it past the viewport when an AppBar sits above it.

PageLayout accepts maxWidth, centerContent, themeToggle, outerClassName and innerClassName. PageHeader takes title, subtitle and action children.

Minion playground

Every banana, light and dark

Props

PageLayout

childrenReactNode
Content.
maxWidthstring
Default: 'max-w-5xl'
Tailwind max-width class for the content column.
centerContentboolean
Default: false
Vertically and horizontally center the content.
themeToggleboolean
Default: false
Show a floating theme toggle.
outerClassNamestring
Default: ''
Extra classes for the outer wrapper.
innerClassNamestring
Default: ''
Extra classes for the inner column.

PageLayout props
Prop	Type	Default	Description
`children`	ReactNode	–	Content.
`maxWidth`	string	`'max-w-5xl'`	Tailwind max-width class for the content column.
`centerContent`	boolean	`false`	Vertically and horizontally center the content.
`themeToggle`	boolean	`false`	Show a floating theme toggle.
`outerClassName`	string	`''`	Extra classes for the outer wrapper.
`innerClassName`	string	`''`	Extra classes for the inner column.

PageHeader

titleReactNode
Page title.
subtitleReactNode
Small uppercase line under the title.
childrenReactNode
Page actions, shown on the right.

PageHeader props
Prop	Type	Default	Description
`title`	ReactNode	–	Page title.
`subtitle`	ReactNode	–	Small uppercase line under the title.
`children`	ReactNode	–	Page actions, shown on the right.

Related hooks and theme:ThemeProvider