Components

HStack

Arrange children in a horizontal row with configurable spacing and vertical 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 { HStack } from '@swiftuijs/ui';
export default function Example() {
    return (<HStack>{(<>
        <Text>Left</Text>
        <Text>Center</Text>
        <Text>Right</Text>
      </>)}</HStack>);
}

Usage and limitations

  • alignment is top, center (default), or bottom; spacing applies between adjacent children.
  • Compose with VStack or ZStack; Spacer distributes available horizontal space.
  • Children do not wrap automatically. Add style={{ flexWrap: 'wrap' }} or switch layouts for narrow containers.
  • For long scrolling lists, use LazyHStack 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 vertical screen coordinate for every child view. Default: 'center'
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

HSplitView

HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.

Image

Display an image using a native HTML `img` element.