XDS — Design System

XDSLayoutPanel@xds/core · Layout

Preview coming soon

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.

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.

Import

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

Props

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.

Showcase source

tsx
'use client';
import {
  XDSLayout,
  XDSLayoutPanel,
  XDSLayoutContent,
  XDSLayoutHeader,
  XDSLayoutFooter,
  XDSCard,
} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
import {XDSList, XDSListItem} from '@xds/core/List';
export default function LayoutPanelShowcase() {
  return (
    <XDSCenter width={600}>
      <XDSLayout
        height="fill"
        header={
          <XDSLayoutHeader hasDivider>
            <XDSCard variant="muted" />
          </XDSLayoutHeader>
        }
        start={
          <XDSLayoutPanel hasDivider width={140} role="navigation">
            <XDSList>
              <XDSListItem label="Overview" isSelected />
              <XDSListItem label="Analytics" />
              <XDSListItem label="Reports" />
              <XDSListItem label="Settings" />
            </XDSList>
          </XDSLayoutPanel>
        }
        content={
          <XDSLayoutContent>
            <XDSCard variant="muted" />
          </XDSLayoutContent>
        }
        footer={
          <XDSLayoutFooter hasDivider>
            <XDSCard variant="muted" />
          </XDSLayoutFooter>
        }
      />
    </XDSCenter>
  );
}