XDS — Design System

StackItem@xds/core · XDSStackItem 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 {XDSStackItem} 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, XDSStackItem} from '@xds/core/Layout';
import {XDSCard} from '@xds/core/Card';
import {XDSText} from '@xds/core/Text';
export default function StackItemShowcase() {
  return (
    <XDSHStack gap={3} vAlign="center">
      <XDSStackItem size="static">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Static
          </XDSText>
        </XDSCard>
      </XDSStackItem>
      <XDSStackItem size="fill">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Fills remaining space
          </XDSText>
        </XDSCard>
      </XDSStackItem>
      <XDSStackItem size="static">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Static
          </XDSText>
        </XDSCard>
      </XDSStackItem>
    </XDSHStack>
  );
}