Page structure

Shell hierarchy

SidebarProvider          # required only when a sidebar is present
`-- AppLayout            # outermost shell, fills the viewport
    |-- Sidebar          # optional collapsible nav panel
    `-- AppLayoutContent # grows to fill the remaining width
        |-- AppHeader    # top navigation bar, fixed height
        `-- AppLayoutMain # scrollable content area

Without a sidebar, omit SidebarProvider and Sidebar:

AppLayout
`-- AppLayoutContent
    |-- AppHeader
    `-- AppLayoutMain

See App Layout for focused layout examples.

AppHeader slots

AppHeader is divided into three optional slots:

Slot	Position	Typical content
AppHeaderLeading	Left	Mobile sidebar toggle, logo
AppHeaderContent	Center (grows)	Breadcrumb, page title
AppHeaderTrailing	Right (pinned to edge)	Action buttons, notifications
AppHeaderNotifications	Inside Trailing	Notification bell with count badge

Use only the slots you need; each is optional and can be rendered conditionally.

Page content

AppLayoutMain is the scrolling region. Place page content directly inside it. The padding is built in; there is no need to add it yourself.

Typical content patterns:

• Page heading: a title and optional subtitle above the main content
• Cards or panels: grouped data using Card, Table, etc.
• Empty state: use Empty when the page has no data to show

Skeleton

import {
  AppHeader,
  AppHeaderContent,
  AppHeaderLeading,
  AppHeaderTrailing,
  AppLayout,
  AppLayoutContent,
  AppLayoutMain,
  MenuIcon,
  Sidebar,
  SidebarContent,
  SidebarProvider,
  SidebarTrigger,
} from "@falcon/ui-kit";

export function Page() {
  return (
    <SidebarProvider>
      <AppLayout>
        <Sidebar>
          <SidebarContent>{/* nav items */}</SidebarContent>
        </Sidebar>

        <AppLayoutContent>
          <AppHeader>
            <AppHeaderLeading>
              <SidebarTrigger
                icon={<MenuIcon size={16} />}
                className="tw:md:hidden"
              />
            </AppHeaderLeading>
            <AppHeaderContent>{/* breadcrumb or title */}</AppHeaderContent>
            <AppHeaderTrailing>{/* actions */}</AppHeaderTrailing>
          </AppHeader>

          <AppLayoutMain>{/* page content */}</AppLayoutMain>
        </AppLayoutContent>
      </AppLayout>
    </SidebarProvider>
  );
}