XDSHStack@xds/core · Layout

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

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

Import

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

Showcase source

tsx
'use client';
​
import {XDSHStack, XDSVStack} from '@xds/core/Layout';
import {XDSBadge} from '@xds/core/Badge';
import {XDSText} from '@xds/core/Text';
​
export default function HStackShowcase() {
  return (
    <XDSVStack gap={6}>
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=2, start-aligned</XDSText>
        <XDSHStack gap={2}>
          <XDSBadge label="React" />
          <XDSBadge label="TypeScript" />
          <XDSBadge label="Node.js" />
        </XDSHStack>
      </XDSVStack>
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=4, center-aligned</XDSText>
        <XDSHStack gap={4} hAlign="center">
          <XDSBadge label="Design" />
          <XDSBadge label="Engineering" />
          <XDSBadge label="Product" />
        </XDSHStack>
      </XDSVStack>
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=2, space-between</XDSText>
        <XDSHStack gap={2} hAlign="between">
          <XDSBadge label="Start" />
          <XDSBadge label="Middle" />
          <XDSBadge label="End" />
        </XDSHStack>
      </XDSVStack>
    </XDSVStack>
  );
}