XDS — Design System

HStack@xds/core · XDSHStack 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 {XDSHStack} 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 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>
  );
}