Layout Props

Name	Type	Default	Description
contentWidth	number | string	-	Maximum width of the aligned content. Dividers stay full width. Numbers are pixels. A percentage, fit-content, max-content, min-content, or a bare var() uses constrained width.
height	'fill' | 'auto'	'fill'	fill stretches to the container and scrolls the content. auto grows with the content.
padding	SpacingStep	-	Outer inset for this layout only. It does not pass to a nested layout. 0 is full bleed.
defaultHasDividers	boolean	-	Fallback for a header or footer that does not set hasDivider.

SpacingStep accepts 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10.

Layout Slots

Name	Description
default	The content region. Put a LayoutContent here.
header	The top region. Put a LayoutHeader here.
start	The inline-start region. Put a LayoutPanel here, and a ResizeHandle beside it when the panel resizes.
end	The inline-end region.
footer	The bottom region. Put a LayoutFooter here.

Layout Header Props

Name	Type	Default	Description
hasDivider	boolean	inherited	Border on the bottom edge. Omit it to use defaultHasDividers, which is false when the layout does not set one.
height	number | string	-	Height. Numbers are pixels, strings are used as they are.
padding	SpacingStep	-	Padding. 0 lets the content own its inset.
paddingBlockEnd	SpacingStep	-	Bottom padding only, so a tab underline can meet the divider.
label	string	-	Accessible name when role is set.
role	AriaRole	-	ARIA landmark role.

LayoutHeader has a default slot for its content.

Layout Footer Props

LayoutFooter accepts hasDivider, height, padding, label, and role with the same meaning as the header. hasDivider draws the border on the top edge. It has a default slot.

Layout Content Props

Name	Type	Default	Description
padding	SpacingStep	-	Padding. 0 lets a child such as Section reach the edges.
isScrollable	boolean	true	Scroll this region when the content overflows.
label	string	-	Accessible name when role is set.
role	AriaRole	-	ARIA landmark role.

LayoutContent has a default slot.

Layout Panel Props

Name	Type	Default	Description
hasDivider	boolean	false	Border on the edge that faces the content. Leave it off when a ResizeHandle draws that line.
padding	SpacingStep	-	Padding. Omit it and a panel without a divider collapses the margin that faces the content.
isScrollable	boolean	true	Scroll this panel when the content overflows.
width	number | string	-	Width. Numbers are pixels. Ignored while resizable is set.
resizable	LayoutResizable	-	The props object from useResizable. The panel width follows _size, and the object also carries the region's axis as _direction ('horizontal' | 'vertical'), which must match the adjacent ResizeHandle.
label	string	-	Accessible name when role is set.
role	AriaRole	-	ARIA landmark role, for example navigation.

LayoutPanel has a default slot.

Native attributes

Each piece renders a <div>.

The following go to its root:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged. Layout sets data-height.