Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use Layout for full app layouts and HStack/VStack for simple directional stacking.
ts
| Guidance | Practices |
|---|---|
| Do | Use Layout for page shells that need distinct zones like header, sidebar(s), content, and footer. |
| Do | Use HStack and VStack for simple directional stacking within a content area. |
| Don't | Use Layout for simple stacking layouts; use HStack or VStack instead. |
| Don't | Nest multiple Layout components; use one per page shell and compose content within its slots. |
A card layout with header, scrollable content area, and footer with action buttons.
A minimal layout with just a content area inside a card, without header or footer.
A layout using contentWidth to constrain and center content while keeping dividers full-bleed.
A file browser style layout with start panel for folders, main content for files, and end panel for details.
A layout where content extends edge-to-edge with zero padding, ideal for tables or images.
A settings page layout with a navigation sidebar panel, content area, header, and footer.