Stack
Stack
A flexbox layout primitive with first-class responsive props — "give me a row that stacks to a column on mobile." Pairs with Grid.
import { Stack } from "@pompeitech/vesuvius-ui";Column (default)
1
2
3
Row
1
2
3
Responsive direction
1
2
Space between
1
2
API
Stack
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "row" | "column" | "row-reverse" | "column-reverse", or { base?, sm?, md?, lg?, xl? } of those | "column" | Responsive when given the breakpoint-object form. |
align | "start" | "center" | "end" | "stretch" | "baseline" | Maps to align-items. | |
justify | "start" | "center" | "end" | "between" | "around" | "evenly" | Maps to justify-content. | |
gap | Tailwind spacing scale number, or { base?, sm?, md?, lg?, xl? } of those | 0 | Responsive the same way as direction. |
wrap | boolean | false | Maps to flex-wrap: wrap. |
Plus every native <div> prop.