XDS — Design System

Layout@xds/core v0.0.13 · XDSLayout

Usage

Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use XDSLayout for full app layouts and XDSHStack/XDSVStack for simple directional stacking.

ts
import {XDSLayout} from '@xds/core/Layout'

Best practices

Guidance	Practices
Do	Use XDSLayout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use XDSHStack and XDSVStack for simple directional stacking within a content area.
Don't	Use XDSLayout for simple stacking layouts — use XDSHStack or XDSVStack instead.
Don't	Nest multiple XDSLayout components — use one per page shell and compose content within its slots.

Sub-components

Layout is a compound component with 9 sub-components.

XDSHStack

Horizontal stack that arranges children left-to-right.

XDSLayout

Page shell with header, sidebar(s), content, and footer slots for building full app layouts.

Prop	Type	Description
content	ReactNode	Main content area (center).
header	ReactNode	Header slot.
footer	ReactNode	Footer slot.
start	ReactNode	Start panel (left in LTR).
end	ReactNode	End panel (right in LTR).
height	'fill' \| 'auto' (default: 'fill')	Height behavior — fill the container or grow with content.

XDSLayoutContainer

Primitive component that sets CSS variables for padding, used as the base for XDSCard and XDSSection.

XDSLayoutContent

Scrollable main content area.

Prop	Type	Description
children	ReactNode	Content.
isScrollable	boolean (default: true)	Enable scrollable overflow.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

XDSLayoutFooter

Bottom bar for action bars, pagination, and status bars.

Prop	Type	Description
children	ReactNode	Footer content.
hasDivider	boolean (default: false)	Border at top edge.
height	number \| string	Footer height.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

XDSLayoutHeader

Top bar for page titles, app bars, and toolbars.

Prop	Type	Description
children	ReactNode	Header content.
hasDivider	boolean (default: false)	Border at bottom edge.
height	number \| string	Header height.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

XDSLayoutPanel

Sidebar for navigation, settings, or inspector panels.

Prop	Type	Description
children	ReactNode	Panel content.
hasDivider	boolean (default: false)	Border on the appropriate edge.
isScrollable	boolean (default: true)	Enable scrollable overflow.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

XDSStackItem

Stack item with fill and alignment control for use inside XDSHStack or XDSVStack.

XDSVStack

Vertical stack that arranges children top-to-bottom.

Examples

Common configurations, variations, and states.

Layout — Basic Card

A card layout with header, scrollable content area, and footer with action buttons.

Layout — Content Only

A minimal layout with just a content area inside a card, without header or footer.

Layout — Content Width

A layout using contentWidth to constrain and center content while keeping dividers full-bleed.

Layout — Dual Panel

A file browser style layout with start panel for folders, main content for files, and end panel for details.

Layout — Full Bleed Content

A layout where content extends edge-to-edge with zero padding, ideal for tables or images.

Layout — Sidebar Navigation

A settings page layout with a navigation sidebar panel, content area, header, and footer.

Usage

import {XDSLayout} from '@xds/core/Layout'

Best practices

Guidance	Practices
Do	Use XDSLayout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use XDSHStack and XDSVStack for simple directional stacking within a content area.
Don't	Use XDSLayout for simple stacking layouts — use XDSHStack or XDSVStack instead.
Don't	Nest multiple XDSLayout components — use one per page shell and compose content within its slots.

Prop

Type

Description

content

ReactNode

Main content area (center).

header

ReactNode

Header slot.

footer

ReactNode

Footer slot.

start

ReactNode

Start panel (left in LTR).

end

ReactNode

End panel (right in LTR).

height

'fill' | 'auto' (default: 'fill')

Height behavior — fill the container or grow with content.

Prop

Type

Description

children

ReactNode

Content.

isScrollable

boolean (default: true)

Enable scrollable overflow.

label

string

Accessible label for the landmark element.

role

AriaRole

ARIA landmark role.

Prop

Type

Description

children

ReactNode

Footer content.

hasDivider

boolean (default: false)

Border at top edge.

height

number | string

Footer height.

label

string

Accessible label for the landmark element.

role

AriaRole

ARIA landmark role.

Prop

Type

Description

children

ReactNode

Header content.

hasDivider

boolean (default: false)

Border at bottom edge.

height

number | string

Header height.

label

string

Accessible label for the landmark element.

role

AriaRole

ARIA landmark role.

Prop

Type

Description

children

ReactNode

Panel content.

hasDivider

boolean (default: false)

Border on the appropriate edge.

isScrollable

boolean (default: true)

Enable scrollable overflow.

label

string

Accessible label for the landmark element.

role

AriaRole

ARIA landmark role.