Components

VStack

Arrange children vertically with configurable spacing and horizontal alignment.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
export default function Example() {
    return (<VStack>{(<>
        <Text>First</Text>
        <Text>Second</Text>
        <Text>Third</Text>
      </>)}</VStack>);
}

Usage and limitations

  • alignment is leading, center, or trailing; omitted alignment stretches children across the container; spacing applies between adjacent children.
  • Compose with HStack or ZStack; Spacer distributes available vertical space.
  • Allow the container and children to shrink on narrow screens; long content may need ScrollView.
  • For long scrolling lists, use LazyVStack and review its virtualization requirements.

More examples

Spacing
Leading Alignment
Center Alignment
Trailing Alignment
With Spacer
With Buttons
Complex Layout

API reference

PropTypeRequiredDescription
alignmentEAlignmentNoThe guide for aligning the subviews in this stack. This guide has the same horizontal screen coordinate for every child view. Default: undefined (uses container default)
spacingnumber | stringNoThe distance between adjacent subviews, in pixels. If nil, the stack chooses a default distance for each pair of subviews. Default: 0

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

VSplitView

VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.

ZStack

Layer children in the same grid area.