Components

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.

Example

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

Default

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { HStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { ViewThatFits } from '@swiftuijs/ui';
export default function Example() {
    return ((<ViewThatFits width={320}>
      <HStack data-min-width={520} spacing={16}>
        <Card><Text>Sidebar</Text></Card>
        <Card><Text>Detail</Text></Card>
      </HStack>
      <VStack data-min-width={300} spacing={12}>
        <Card><Text>Compact content</Text></Card>
        <Card><Text>Secondary section</Text></Card>
      </VStack>
      <Card>
        <Text>Fallback content</Text>
      </Card>
    </ViewThatFits>));
}

Usage and limitations

  • Order children from most spacious to most compact.
  • Use width when you want deterministic layout selection in docs or tests.

API reference

PropTypeRequiredDescription
widthnumberNoExplicit width used to evaluate fitting children. When omitted the component observes its container width after hydration.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

VideoPlayer

VideoPlayer wraps the native browser video element while keeping SwiftUI's dedicated media-player mental model.

VisualEffect

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