Layout

Stack

One-dimensional flex layout primitive for arranging direct children with controlled direction, spacing, alignment, and wrapping.

import { Stack } from '@lostgradient/cinder/stack';
layoutstackflex
01

Overview

One-dimensional layout primitive for arranging direct children with flexbox.

Usage

svelte 
<script lang="ts">
  import Stack from '@lostgradient/cinder/stack';
</script>

<Stack gap="var(--cinder-space-3)">
  <p>Primary content</p>
  <p>Supporting content</p>
</Stack>

Props

Stack supports direction, gap, align, justify, wrap, as, class, and children.

Accessibility

Stack does not add roles, keyboard behavior, or ARIA state. Choose as only when the rendered element carries correct document semantics for the content.

Live preview
Account settings Manage your profile and preferences.
02

When to use

Use when
  • Arranging related controls, form rows, or panel sections along one axis.
  • You need lightweight spacing and alignment without two-dimensional grid placement.
Avoid when
  • You need explicit rows and columns — use grid.
03

Examples

Basic stack

Arrange related content along one axis.

04

Props

Props for stack
NameTypeDefaultDescription
direction 'row' | 'column' | 'row-reverse' | 'column-reverse' 'column' Flex direction.
gap text Uniform flex gap.
align 'start''center''end''stretch''baseline' 'stretch' Cross-axis alignment.
justify 'start''center''end''between''around''evenly' 'start' Main-axis distribution.
wrap boolean false Whether child items may wrap onto additional lines.
as NonVoidHTMLElementTagName 'div' Rendered HTML tag.
children required snippet Stack contents.