Example

Full application layout with sticky header, footer, and main content area

Current Configuration
Props used for this example
<AppShell
  header={<Header />}
  footer={<Footer />}
  maxWidth="2xl"
  padded
  stickyHeader
>
  {children}
</AppShell>
Available Props
Customize the AppShell behavior
headerReact.ReactNode

Header component (optional)

footerReact.ReactNode

Footer component (optional)

maxWidthContainerSize | falsedefault: "xl"

Max width for main content container

paddedbooleandefault: true

Enable horizontal padding on main content

stickyHeaderbooleandefault: false

Make header sticky (scroll with page)

Content Section 1
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content Section 2
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content Section 3
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.