Layouts

How to compose layout components into complete page structures. Mordecai provides a layered layout system: AppLayout for the application shell, PageLayout for page-level spacing, and primitives like Container and Stack for content arrangement.

Architecture

The layout system follows a nesting hierarchy. Each layer handles a specific concern:

<AppLayout>              ← Application shell (sidebar + header)
  <PageLayout>            ← Page spacing + max-width
    <Container>           ← Content centering
      <Stack spacing={6}> ← Vertical rhythm
        <section>...</section>
        <section>...</section>
      </Stack>
    </Container>
  </PageLayout>
</AppLayout>

Layout Components

Component	Purpose	When to Use
AppLayout	Top-level application shell combining SidebarProvider, Sidebar, and content area.	Wrap your entire app or authenticated section.
PageLayout	Responsive page wrapper with constrained width and adaptive padding.	Inside AppLayout's content area for page-level spacing.
Sidebar	Collapsible sidebar with compound sub-components for navigation.	Inside AppLayout, or standalone with SidebarProvider.
Container	Constrains content width with optional padding. Sizes from xs to 7xl.	For centering and constraining content blocks within a page.
Stack	Arranges children vertically or horizontally with consistent spacing.	The primary spacing primitive — use everywhere.

Full Application Layout

AppLayout provides a complete application shell with sidebar navigation, header, and content area. It handles responsive behavior, sidebar collapse, and mobile offcanvas automatically.

Page Spacing

PageLayout controls page-level padding and max-width. It adapts padding based on viewport size and supports multiple padding presets.

Narrow (xl)

Best for articles, blog posts, and long-form content where readability is important. Max width of 576px.

Medium (2xl)

Great for forms, settings pages, and focused content areas. Max width of 672px.

Wide (4xl)

Ideal for dashboards, data tables, and content-rich pages. Max width of 896px.

Full Width

No max-width constraint. Use for hero sections or full-bleed content.

Centered Pages

For login screens, confirmation pages, or any centered single-card layout, use PageLayout with centered alignment.

Component "page-layout-centered-demo" not found in registry.

Common Patterns

Dashboard Page

import { AppLayout } from '@corew500/ui/app-layout'
import { Container } from '@corew500/ui/container'
import { Stack } from '@corew500/ui/stack'

export default function DashboardPage() {
  return (
    <AppLayout sidebar={<DashboardNav />}>
      <Container size="6xl" padding="responsive">
        <Stack spacing={6}>
          <DashboardHeader />
          <StatsGrid />
          <RecentActivity />
        </Stack>
      </Container>
    </AppLayout>
  )
}

Marketing Landing Page

import { PageLayout } from '@corew500/ui/page-layout'
import { Container } from '@corew500/ui/container'
import { Stack } from '@corew500/ui/stack'

export default function LandingPage() {
  return (
    <PageLayout padding="none">
      <Hero />
      <Container size="5xl" padding="responsive">
        <Stack spacing={16}>
          <FeaturesSection />
          <TestimonialsSection />
          <CTASection />
        </Stack>
      </Container>
    </PageLayout>
  )
}

Responsive by Default

All layout components handle responsive behavior automatically. AppLayout collapses the sidebar to offcanvas on mobile, PageLayout adjusts padding per breakpoint, and Stack supports responsive direction changes.

Installation

pnpm add @corew500/ui

import { AppLayout } from '@corew500/ui/app-layout'
import { PageLayout } from '@corew500/ui/page-layout'
import { Container } from '@corew500/ui/container'
import { Stack } from '@corew500/ui/stack'
import { Sidebar } from '@corew500/ui/sidebar'