PageLayout owns the page-level grid so product views stay consistent without each route reinventing structure. Aside renders on the right by default; pass asideSide="left" for inspector-style layouts.

#Default usage

<PageLayout
  aside={<div>Inspector</div>}
  header={<PageHeader eyebrow="Workspace" title="Releases" />}
>
  <p>Body</p>
</PageLayout>

#Import

import { PageLayout } from "@froggdesign/enter-ui-react";

#Accessibility

PageLayout wraps the header in <header>, the main content in <main>, and the aside in <aside> so the page exposes proper landmarks.

#API

• header: slot rendered above the content.
• toolbar: optional sticky toolbar slot rendered between header and content.
• aside: optional aside slot.
• asideSide: "left" or "right" (default).
• footerActions: bottom action bar slot.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.