Outer Layouts

Outer layouts wrap content in a reusable frame — a header, sidebar, footer, or any combination. Define the frame once, then reuse it across your application.

Example

<div outerLayout={AppLayout}>
  <Content for="sidebar">
    <nav class="flex flex-col gap-2 text-sm">
      <a href="#">Dashboard</a>
      <a href="#">Settings</a>
      <a href="#">Profile</a>
    </nav>
  </Content>
  <div>
    <h2 class="text-lg font-semibold mb-2">Welcome</h2>
    <p class="text-sm text-muted-foreground">This is the main content area.</p>
  </div>
</div>

const AppLayout = (
  <div class="border rounded overflow-hidden">
    <header class="bg-primary text-primary-foreground p-3">App Header</header>
    <div class="flex">
      <aside class="w-32 bg-muted p-3">
        <ContentPlaceholder name="sidebar" />
      </aside>
      <main class="flex-1 p-3">
        <ContentPlaceholder />
      </main>
    </div>
  </div>
);

import { ContentPlaceholder, Content } from "cx/ui";

How It Works

1. Define the layout with ContentPlaceholder components marking where content goes
2. Apply the layout to any element using the outerLayout attribute
3. Fill the placeholders using Content or putInto

Nested Layouts

Layouts can contain other layouts. The content renders inside-out, allowing you to compose complex page structures from simple, reusable pieces.