AppLayout

Use AppLayout to arrange persistent regions and independently scrollable main content in a full-page application shell.

Code

import {
  AppHeader,
  AppHeaderContent,
  AppHeaderTrailing,
  AppLayout,
  AppLayoutContent,
  AppLayoutMain,
  Badge,
  PageContent,
  PageHeader,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderHeading,
  PageHeaderTitle,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AppLayout>
      <AppLayoutContent>
        <AppHeader>
          <AppHeaderContent>Operations</AppHeaderContent>
          <AppHeaderTrailing>
            <Badge variant="secondary">3 open orders</Badge>
          </AppHeaderTrailing>
        </AppHeader>

        <AppLayoutMain>
          <PageHeader>
            <PageHeaderHeading>
              <PageHeaderContent>
                <PageHeaderTitle>Order activity</PageHeaderTitle>
                <PageHeaderDescription>
                  Review recent orders and follow up on items that need
                  attention.
                </PageHeaderDescription>
              </PageHeaderContent>
            </PageHeaderHeading>
          </PageHeader>

          <PageContent>
            <p className="tw:text-sm tw:text-muted-foreground">
              Recent orders and follow-ups go here.
            </p>
          </PageContent>
        </AppLayoutMain>
      </AppLayoutContent>
    </AppLayout>
  );
}

Composition

AppLayout
├── Sidebar (optional)
└── AppLayoutContent
    ├── AppHeader
    └── AppLayoutMain
        ├── PageHeader
        └── PageContent

When including Sidebar, wrap the complete layout in SidebarProvider so the sidebar and its triggers share state. See AppHeader for top-bar composition, Page for the per-page header and content inside AppLayoutMain, and Layout for the complete application shell.

API

AppLayout

Renders the application shell’s outer <div> element. Accepts standard props for a <div> element.

AppLayoutContent

Renders the application shell’s main column as a <div> element. Accepts standard props for a <div> element.

AppLayoutMain

Renders the scrollable main content region as a <main> element. Accepts standard props for a <main> element. Holds a PageHeader followed by page content — either a PageContent or, for content that runs edge-to-edge, direct children in its place.