Layout

Layout is a structural component for a page or screen-sized region. It fills the available width by default, uses the viewport height by default, and centers its children horizontally. It can also provide optional header and footer regions for a complete page shell.

Basic usageCopy Anchor Link

import { Layout } from '@mosmox/ui';

<Layout contentPosition="center">
  <main>Page content</main>
</Layout>

The component does not add a border or visual frame. Those styles belong to the application or to a preview surface.

Page shellCopy Anchor Link

Use header and footer to create optional page regions. They are rendered only when a value is supplied, so an omitted region takes no space.

<Layout
  contentPosition="top"
  header={<SiteHeader />}
  footer={<SiteFooter />}
>
  <main>Page content</main>
</Layout>

Set stickyHeader to keep the header at the top of its scroll context:

<Layout header={<SiteHeader />} stickyHeader>
  <main>Long page content</main>
</Layout>

Width modesCopy Anchor Link

The default widthMode="full" spans the available width. widthMode="constrained" creates a responsive page shell: it uses up to 80vw on smaller screens and stops growing at maxWidth (1200px by default). This prevents content from becoming uncomfortably wide on large monitors.

<Layout widthMode="constrained" maxWidth={1200}>
  <main>Responsive page content</main>
</Layout>

On a narrow screen the constrained shell keeps a 16px side margin; on larger screens it is centered automatically.

Content positionCopy Anchor Link

Use contentPosition to choose the vertical position of the content. The horizontal alignment remains centered.

<Layout contentPosition="top">Top content</Layout>
<Layout contentPosition="center">Centered content</Layout>
<Layout contentPosition="bottom">Bottom content</Layout>

Set contentAlign="start" for ordinary top-left content flow. This is useful for document pages and application shells:

<Layout contentPosition="top" contentAlign="start">
  <article>Content starts in the top-left corner.</article>
</Layout>

Supported contentPosition values:

Dashboard layoutsCopy Anchor Link

Use dashboardMode with sidebar to create a dashboard shell with independent scrolling. The sidebar is always on the left. The header and footer are optional and are rendered only when supplied. contentWidth controls the width of the scrollable content inside the remaining main section.

header-sidebar-footer places the header and footer across the full width. The sidebar occupies the left side between them, while only the main content scrolls.

<Layout
  dashboardMode="header-sidebar-footer"
  sidebar={<DashboardNavigation />}
  sidebarWidth={280}
  header={<DashboardHeader />}
  footer={<DashboardFooter />}
  contentWidth="constrained"
  contentMaxWidth={1200}
>
  <DashboardContent />
</Layout>

For a document-like reading area, use contentWidth="constrained" and set contentMaxWidth. The surrounding dashboard section still occupies the available space and scrolls independently; only the inner document is centered and capped.

<Layout
  dashboardMode="sidebar-header-footer"
  sidebar={<DashboardNavigation />}
  contentWidth="constrained"
  contentMaxWidth={860}
>
  <Article />
</Layout>

sidebar-header-footer makes the sidebar span the full viewport height. Header, content, and footer are stacked in the remaining right-hand area.

<Layout
  dashboardMode="sidebar-header-footer"
  sidebar={<DashboardNavigation />}
  sidebarWidth="18rem"
  header={<DashboardHeader />}
  footer={<DashboardFooter />}
>
  <DashboardContent />
</Layout>

On screens up to 720px, the sidebar is collapsed by default and the layout renders a toggle button. Set defaultSidebarOpen, control it with sidebarOpen, or listen with onSidebarOpenChange. Set sidebarCollapsible={false} to keep it open on mobile.

Both dashboard modes also support an optional right sidebar. It is rendered only when rightSidebar is supplied and is never displayed on mobile screens.

<Layout
  dashboardMode="sidebar-header-footer"
  sidebar={<PrimaryNavigation />}
  rightSidebar={<DetailsPanel />}
  rightSidebarWidth={280}
  header={<DashboardHeader />}
>
  <DashboardContent />
</Layout>

DimensionsCopy Anchor Link

Layout uses width: 100% and height: 100vh by default. Use fullWidth={false} to let the element use its natural width, or provide explicit dimensions for an embedded region:

<Layout height={400} minHeight={320} contentPosition="center">
  <section>Embedded screen content</section>
</Layout>

Numeric dimensions are interpreted as pixels. Strings accept any valid CSS length, such as "60vh", "32rem", or "100%".

API ReferenceCopy Anchor Link

All other standard HTMLAttributes<HTMLDivElement> properties, including id, role, aria-*, and data-* attributes, are passed to the root element.