Components

VSplitView

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

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 { VSplitView } from '@swiftuijs/ui';
export default function Example() {
    return ((<VSplitView fractions={[1, 2]}>
      <Card>
        <VStack spacing={8} style={{ padding: 0 }}>
          <Text style={{ fontWeight: 600 }}>Top</Text>
          <Text>Top pane content</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: 0 }}>
          <Text style={{ fontWeight: 600 }}>Bottom</Text>
          <Text>Bottom pane content</Text>
        </VStack>
      </Card>
    </VSplitView>));
}

Status: adapted

Usage and limitations

  • fractions defines the relative height of each pane in source order
  • vertical dividers are emitted between panes by default
  • the first version focuses on stable pane layout, not interactive resizing

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

VisualEffect

VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.

VStack

Arrange children vertically with configurable spacing and horizontal alignment.