Skip to main content
Browse docs

Marwes documentation

Spacing

Family-local layout-spacing family with one decorative Spacing component backed by a token scale, a scale multiplier escape hatch, and shared React/Vue adapter parity.

What this family solves

Family-local layout-spacing family with one decorative Spacing component backed by a token scale, a scale multiplier escape hatch, and shared React/Vue adapter parity.

Use when

  • The layout needs an explicit decorative vertical gap between elements and the team wants that gap to come from the shared spacing token scale.
  • The product wants React and Vue spacing behavior to stay aligned through one core recipe and one shared token vocabulary.
  • The surrounding composition benefits from a visible spacer primitive instead of many one-off margins spread across sibling elements.

Avoid when

  • The layout should be expressed more honestly through parent gap, stack, grid, or section structure rather than a standalone spacer element.
  • The visual gap would be carrying semantic meaning that should instead come from headings, dividers, lists, or field grouping.
  • The team expects a dedicated Figma component family or central semantic-registry entry that the current Spacing family does not ship.

Public imports

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

React — @marwes-ui/react

Components

Spacer, Spacing

Types

SpacerProps, SpacingProps, SpacingSize

Enum

Spacings

Vue — @marwes-ui/vue

Components

Spacer, Spacing

Types

SpacerProps, SpacingProps, SpacingSize

Enum

Spacings

Svelte — @marwes-ui/svelte

Components

Spacer, Spacing

Types

SpacerProps, SpacingProps, SpacingSize

Enum

Spacings

Verified minimal examples

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

React

import { Spacing, Spacings } from "@marwes-ui/react"

export function Example() {
  return <Spacing size={Spacings.sp24} />
}

Vue

<script setup lang="ts">
import { Spacing, Spacings } from "@marwes-ui/vue"
</script>

<template>
  <Spacing :size="Spacings.sp24" />
</template>

Svelte

<script lang="ts">
  import { Spacing, Spacings } from "@marwes-ui/svelte"
</script>

<Spacing size={Spacings.sp24} />

Accessibility requirements

  • Token-driven rhythm: Use Spacing tokens instead of hardcoded margins so vertical rhythm stays consistent and decorative.
  • Real structure over spacing: Verify Spacing never becomes the only separation between two genuinely distinct regions; use real structure instead.
  • Manual review boundary: Product-level judgment about whether Spacing is the honest layout tool, versus parent-owned gap, section structure, or semantic separators.
  • Manual review 2: Visual review that larger spacer sizes are not being used to imply hidden hierarchy or compensate for weak layout structure.
  • Manual review 3: A future decision on whether this tiny family needs direct runtime contract tests, or whether its current docs-led coverage is sufficient.

Theming

Spacing 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