Stack
StableStacks things top to bottom with an even space between them.
Also known as vstack, flex column, vertical stack
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Normal space
First
Second
Third
<Stack gap={4}>
<p>First</p>
<p>Second</p>
<p>Third</p>
</Stack>The default space between items.
When to use it
Puts things in a column with one even gap between them. The gap belongs to the stack, not to each item, so spacing stays consistent and shrinks in tighter areas.
Made of: Outer box · Items · Push apart
Use it for
- A column of cards, paragraphs or form fields that need the same space between them.
- A list of items, rendered as a real list element.
- Groups inside groups, with a smaller gap inside each group.
Do and avoid
Flight to Lisbon
Hotel, 3 nights
Airport taxi
Flight to Lisbon
Hotel, 3 nights
Airport taxi
Do
- Use the space setting between items, not extra margins.
- Leave more space between groups than inside them.
- Use a real list when the items are a list.
- Put stacks inside stacks for groups, with less space inside.
Avoid
- Do not add margins to items to adjust spacing.
- Do not use spacing outside the set sizes.
- Do not space unrelated areas the same as related items.
- Do not use Stack for a row. Use Cluster.
On a phone
- Items stack in one column and fill the width of the container.
- The gap is the same on a phone, unless the area is set to compact density, which makes it 20% smaller.
Seen in products
- GOV.UK publishes a set of spacing sizes and uses smaller ones on phones.
- Carbon builds all spacing from an 8px unit.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 4 | Step on the 4px grid, so 1 is 4px and 8 is 32px. Multiplied by --density. |
| as | "div" | "section" | "article" | "ul" | "ol" | "nav" | "header" | "footer" | "main" | "aside" | "div" | Element to render. List elements get their markers and padding reset. |
| className / style | string / CSSProperties | none | Merged with the component's own classes and gap. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--density
Built in
- It adds no meaning of its own: it renders the element you choose.
- As a ul or ol it is still announced as a list, even though the bullets are removed.
- Items keep the order they have in your code, so screen readers and the keyboard follow what people see.
What you need to do
- Set as to ul or ol when the items are a list, and wrap each item in li.
- Set as to main, nav or section when the stack is a page area, so screen reader users can jump to it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide