Components

HSplitView

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

Example

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

Default

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { HSplitView } from '@swiftuijs/ui';
export default function Example() {
    return ((<HSplitView fractions={[1, 2]}>
      <Card>
        <VStack spacing={8} style={{ padding: 0 }}>
          <Text style={{ fontWeight: 600 }}>Sidebar</Text>
          <Text>Navigation and filters</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: 0 }}>
          <Text style={{ fontWeight: 600 }}>Content</Text>
          <Text>Primary content surface</Text>
        </VStack>
      </Card>
    </HSplitView>));
}

Status: adapted

Usage and limitations

  • fractions defines the relative width of each pane in source order
  • split dividers are visual only in this first implementation; pane resizing is not yet interactive
  • children are rendered in place, so each pane can host arbitrary SwiftUI.js content

More examples

Three Panes

API reference

This component currently relies on inherited element props.

Inherits additional props from IBaseSplitViewProps.

Edit this page on GitHubReport an issue

HoverEffect

HoverEffect adapts SwiftUI's hover feedback modifiers into explicit pointer-oriented wrappers for the web.

HStack

Arrange children in a horizontal row with configurable spacing and vertical alignment.