Layout

Stack

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

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

Overview

Reference usage

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

Usage

svelte 
<script lang="ts">
  import { Stack } from '@lostgradient/cinder';
</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.

The default direction is column and wrap is false. Stack only owns layout: use gap, align, and justify for flex placement, and choose as="ul", as="nav", or another element only when the children satisfy that element's semantics. It does not make interactive children accessible or recover from overflow; choose a responsive layout or an explicit scroll container when content can exceed the available width.

Live preview

Basic stack

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
Name
Type
Default
Description
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.