Skip to main content
Browse docs

Marwes documentation

Stack

Code-owned layout family with one flex container (Stack) and one declared child (StackItem) whose gap and padding accept only spacing tokens, emitting every resolved layout value as data attributes so design auto layout can be verified against the DOM one-to-one, with React, Vue and Svelte parity proven by a shared contract.

What this family solves

Code-owned layout family with one flex container (Stack) and one declared child (StackItem) whose gap and padding accept only spacing tokens, emitting every resolved layout value as data attributes so design auto layout can be verified against the DOM one-to-one, with React, Vue and Svelte parity proven by a shared contract.

Use when

  • A page or section needs a flex layout whose direction, gap, padding, alignment, justification and wrap should match a design auto-layout board value for value.
  • Children need declared horizontal or vertical sizing (fix, hug or fill) that a verifier can compare with design layout-child sizing.
  • The layout container also carries structure, such as a landmark or a list, through `as` (section, nav, header, footer, main, aside, ul, ol).

Avoid when

  • The layout needs a spacing value that is not a Spacings token (for example sp-6 or an arbitrary px); that is a token decision, not a Stack escape hatch.
  • The layout needs reverse directions, justify stretch, alignSelf, alignContent, min/max sizes, margins or absolute positioning, which are deferred.
  • A two-dimensional grid is the honest structure, or a single decorative vertical gap is all that is needed (use Spacing).

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Stack, StackItem

Types

StackAlignItems, StackAs, StackDirection, StackItemAs, StackItemOptions, StackItemProps, StackItemSizingOptions, StackJustifyContent, StackOptions, StackProps, StackSizing, StackWrap

Helpers

stackAlignItemsValues, stackAsValues, stackDirections, stackItemAsValues, stackJustifyContentValues, stackSizings, stackWraps

Vue — @marwes-ui/vue

Components

Stack, StackItem

Types

StackAlignItems, StackAs, StackDirection, StackItemAs, StackItemOptions, StackItemProps, StackItemSizingOptions, StackJustifyContent, StackOptions, StackProps, StackSizing, StackWrap

Helpers

stackAlignItemsValues, stackAsValues, stackDirections, stackItemAsValues, stackJustifyContentValues, stackSizings, stackWraps

Svelte — @marwes-ui/svelte

Components

Stack, StackItem

Types

StackAlignItems, StackAs, StackDirection, StackItemAs, StackItemOptions, StackItemProps, StackItemSizingOptions, StackJustifyContent, StackOptions, StackProps, StackSizing, StackWrap

Helpers

stackAlignItemsValues, stackAsValues, stackDirections, stackItemAsValues, stackJustifyContentValues, stackSizings, stackWraps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Paragraph, PrimaryButton, Stack, StackItem } from "@marwes-ui/react"

export function Example() {
  return (
    <Stack direction="row" gap="sp-16" padding="sp-24" alignItems="center">
      <StackItem horizontalSizing="fill">
        <Paragraph>Grows to fill the row</Paragraph>
      </StackItem>
      <StackItem>
        <PrimaryButton>Save</PrimaryButton>
      </StackItem>
    </Stack>
  )
}

Vue

<script setup lang="ts">
import { Paragraph, PrimaryButton, Stack, StackItem } from "@marwes-ui/vue"
</script>

<template>
  <Stack direction="row" gap="sp-16" padding="sp-24" align-items="center">
    <StackItem horizontal-sizing="fill">
      <Paragraph>Grows to fill the row</Paragraph>
    </StackItem>
    <StackItem>
      <PrimaryButton>Save</PrimaryButton>
    </StackItem>
  </Stack>
</template>

Svelte

<script lang="ts">
  import { Paragraph, PrimaryButton, Stack, StackItem } from "@marwes-ui/svelte"
</script>

<Stack direction="row" gap="sp-16" padding="sp-24" alignItems="center">
  <StackItem horizontalSizing="fill">
    <Paragraph>Grows to fill the row</Paragraph>
  </StackItem>
  <StackItem>
    <PrimaryButton>Save</PrimaryButton>
  </StackItem>
</Stack>

Accessibility requirements

  • Presentational container: Keep Stack presentational; it adds no role, so use as only for real structure such as a landmark or a list.
  • Landmark and list structure: Give each landmark rendered through as an aria-label when a page has more than one of the same kind, and use StackItem as li inside a ul or ol Stack.
  • Manual review boundary: Landmark naming when `as` renders nav, aside, section, header, footer or main: a page with more than one landmark of the same kind needs a consumer aria-label.
  • Manual review 2: List structure when `as` is ul or ol: every direct child must be StackItem as="li".
  • Manual review 3: Layout verification against computed CSS: data-* values are claims and a consumer style or className can diverge from them.
  • Manual review 4: Owner sign-off on the in-progress family audit before auditStatus moves on.

Theming

Stack uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources