Concepts
Layout and alignment
Choose a direction, cross-axis alignment and spacing.
SwiftUI.js stacks use CSS flexbox; grids use CSS grid. They follow SwiftUI's composition model with browser layout rules.
| Container | Direction | Cross-axis alignment |
|---|---|---|
HStack | Horizontal row | top, center, bottom |
VStack | Vertical column | leading, center, trailing |
ZStack | Overlapping layers | Combined horizontal/vertical alignment |
import { HStack, Spacer, Text } from '@swiftuijs/ui';
<HStack alignment="center" spacing={12}>
<Text>Account</Text>
<Spacer />
<Text>Settings</Text>
</HStack>Usage and limitations
spacingcontrols gaps between adjacent children; use shared tokens for consistent spacing.Spacerexpands only when the parent has available space along the stack's main axis.- A row does not wrap automatically. Allow wrapping explicitly or switch composition for compact containers.
- CSS shrink/stretch rules apply. Avoid deeply nested wrappers added only to force alignment; check long labels and enlarged text.
- Native layout proposals and measurement behavior are not emulated. See responsive layouts for container adaptation.