XDS — Design System

VStack@xds/core · XDSVStack v0.0.13

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 {XDSVStack} 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.

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>
  );
}