Stack
A one-dimensional flex layout: children in a column or a row, spaced by a gap from the --mrd-space-* scale. Use it instead of margins between siblings.
1
2
3
<Stack gap={3}>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
</Stack>Import
import { Stack } from "@merid/react";Examples
Row
1
2
3
<Stack direction="row" gap={2}>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
</Stack>Alignment
align maps to align-items, justify to justify-content (between is space-between).
short
tall
mid
<Stack direction="row" gap={2} align="center" justify="between">
<Box>short</Box>
<Box>tall</Box>
<Box>mid</Box>
</Stack>Wrapping
Design
Tokens
React
CSS
Accessibility
Dark mode
<Stack direction="row" gap={2} wrap>
{tags.map((tag) => <Box key={tag}>{tag}</Box>)}
</Stack>Semantic element
Use as to render a list, nav or form — the layout stays the same.
- First item
- Second item
<Stack as="ul" gap={1}>
<li>First item</li>
<li>Second item</li>
</Stack>API reference
Renders a div unless as is given; forwards its ref and passes all HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "row" | "column" | "column" | Main axis. |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 14 | 16 | 18 | 28 | 4 | Gap from the --mrd-space-* scale (4 = 16px). |
align | "start" | "center" | "end" | "stretch" | "baseline" | – | Cross-axis alignment (align-items). |
justify | "start" | "center" | "end" | "between" | – | Main-axis distribution (justify-content). |
wrap | boolean | false | Allows items to wrap onto multiple lines. |
as | ElementType | "div" | Element or component to render instead of a div. |
Styling
| Hook | Values |
|---|---|
.mrd-stack | Root element |
data-direction | row · column |
data-align | start · center · end · stretch · baseline |
data-justify | start · center · end · between |
data-wrap | Present when wrap |
Component variable: --mrd-stack-gap, set inline from gap. Override it in CSS for responsive gaps:
@media (max-width: 640px) {
.actions.mrd-stack { --mrd-stack-gap: var(--mrd-space-2); }
}Accessibility
- Stack is layout only and adds no role. Choose the right element with
as(ul,nav,form). - Visual order follows DOM order; don't reverse it with CSS, or focus order and reading order will disagree.
Guidelines
Do
Use one gap per stack and nest stacks for different rhythms.
Avoid
Mix gap with margins on children to fine-tune spacing.