XDSVStack@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 {XDSVStack} 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 VStackShowcase() {
  return (
    <XDSHStack gap={10} hAlign="center">
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=2</XDSText>
        <XDSVStack gap={2}>
          <XDSBadge label="Step 1" />
          <XDSBadge label="Step 2" />
          <XDSBadge label="Step 3" />
        </XDSVStack>
      </XDSVStack>
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=4</XDSText>
        <XDSVStack gap={4}>
          <XDSBadge label="Step 1" />
          <XDSBadge label="Step 2" />
          <XDSBadge label="Step 3" />
        </XDSVStack>
      </XDSVStack>
      <XDSVStack gap={2}>
        <XDSText type="supporting" color="secondary">gap=6</XDSText>
        <XDSVStack gap={6}>
          <XDSBadge label="Step 1" />
          <XDSBadge label="Step 2" />
          <XDSBadge label="Step 3" />
        </XDSVStack>
      </XDSVStack>
    </XDSHStack>
  );
}