Vertical flex wrapper with preset gap scale and cross-axis alignment. A
<div style="display:flex;flex-direction:column">with semantic spacing.
<kp-stack> arranges children vertically with a fixed gap chosen from the project's spacing token scale. Cross-axis alignment (align) controls how children are placed on the horizontal axis — stretch (default) makes them fill the container width.
| Name | Type | Default | Description |
|---|---|---|---|
gap |
'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' |
'md' |
Vertical spacing between children |
align |
'start' | 'center' | 'end' | 'stretch' |
'stretch' |
Cross-axis alignment |
| Token | Value |
|---|---|
none |
0 |
2xs |
8 |
xs |
12 |
sm |
16 |
md |
20 |
lg |
24 |
xl |
32 |
2xl |
40 |
- Replace inline flex styles with Stack. The gap token keeps vertical rhythm consistent with the rest of the system.
- Use
align="center"for centered card content (logo + title stacks). - Nest Stacks when one group has its own rhythm (form section + row-of-actions below).
- Don't use Stack with a single child. It becomes a pointless wrapper.
- Don't override
gapvia CSS — the preset scale is the contract. If the scale is wrong, extend the scale.
- Figma pattern:
StackComponent Set - Storybook: https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-stack
- Source:
packages/ui/stack/src/
0.1.0— Initial release. 8 gap presets × 4 alignments.