Components
VisualEffect
VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Subtle
Loading preview…
Code
'use client';
import { Text } from '@swiftuijs/ui';
import { VisualEffect } from '@swiftuijs/ui';
export default function Example() {
return ((<VisualEffect effect="subtle">
<Text style={{ padding: '12px 16px' }}>Secondary surface</Text>
</VisualEffect>));
}Status: adapted
More examples
Prominent
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
effect | 'subtle' | 'prominent' | No | — |
shape | 'automatic' | 'rounded' | 'capsule' | No | — |
active | boolean | No | — |
Inherits additional props from IBaseComponent.
ViewThatFits
ViewThatFits picks the first layout variant that fits the available width. The web version uses `data-min-width` hints on child views to choose an appropriate variant.
VSplitView
VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.