PageLayout: a composable app layout

PageLayout is the new Strato layout component and the more flexible successor to Page. It keeps the familiar slot-based structure (header, sidebar, content, and details) while giving you more freedom in how you compose and control those panels. Page still works, so you can migrate at your own pace.

Composable slots

The headline change is that slots are composable: Header, Sidebar, Content, and Details can live anywhere in your component tree—inside an <Outlet />, a <Suspense> boundary, or any wrapper—instead of having to be direct children. That's what makes it work cleanly with routers, where the layout frame and the routed content can own different slots. Beyond that, panel state is preserved across collapse and expand, the details panel can render side-by-side or as an overlay, and panels are responsive with their own breakpoints.

Migrating from Page

Most of the migration is mechanical, so you just need to rename the slots and a few props. A few APIs changed along the way (expand/collapse controls are always on, content always stays mounted) and the default breakpoints are different, so review any breakpoint overrides after you switch.

Start with the PageLayout component and the migration guide.