Skip to content
EspañolEnglish
All components (204)

Stack

Layout · Stack · .amset-stack

What it is and when to use it

Stacks or lays out in a row with a gap from the scale. It is the layout used all the time: Text and Title are born with margin: 0 on purpose, and the space between them is set by whoever lays them out. Here go together what other libraries split into "Stack" and "Group": it is the same flex changing direction.

The other layout pieces have their own card: Grid (Grid), Container (Container), Center (Center), AspectRatio (Aspect ratio) and ScrollArea (Scroll area).

When to use it

  • Separating the blocks of a card, a form or a panel without loose margins. gap goes from none to xl and comes from the spacing scale.
  • direction="row" to put them in a row: with justify="between" and align="center" it is the usual header, the title on one side and the rest on the other. wrap lets the row move on to the next line instead of squeezing.
  • as renders the right element (section, header, nav…) without wrapping it in another div.

When not to

  • Cards that share the width in columns and wrap to the next row: Grid.
  • The reading width of a page: Container.

What is NOT there, on purpose: there is no Box with loose style props (p, mt, bg). Other libraries have it because their whole system relies on style props; this house's says the opposite —fine-tuning goes in CSS variables— and adding it would open exactly that door.

Keyboard: it does not take part: it only lays out. The tab order is the order of the code, also in a row.

Accessibility: it adds no role: whatever role it has comes from the element in as. There is no order and no reversed directions, so the screen reader and the Tab key go through the same thing you see.

Fine-tuning: --amset-stack-gap, the gap; gap sets it from the scale.

What it looks like

ActivePending

In a row, spaced apart.

<Stack direction="row" gap="md" align="center">
  <Tag tone="success">Active</Tag>
  <Text>In a row, spaced apart.</Text>
</Stack>

Props

Import it with import { Stack } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
alignStackAlign—
as"article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span"—
classNamestringMerged with the library classes; it does not replace them.
direction"column" | "row"`column` (default) stacks; `row` lays them out in a row.
gap"sm" | "md" | "lg" | "none" | "xs" | "xl"—
justifyStackJustify—
styleCSSProperties—
wrapbooleanIn a row, lets it wrap onto the next line instead of squeezing.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-stack-gapvar(--amset-space-4)

How to change it

.amset-stack {
  --amset-stack-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: