Components

AspectRatio

Constrains content to a target ratio, aligned with SwiftUI's aspectRatio modifier.

Example

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

Default

Loading preview…

Code
'use client';
import { AspectRatio, Card, Text, VStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<AspectRatio ratio={[4, 3]}>
      <Card>
        <VStack spacing={8}>
          <Text>AspectRatio content</Text>
          <Text>4:3 fit container</Text>
        </VStack>
      </Card>
    </AspectRatio>));
}

More examples

Fill mode

API reference

PropTypeRequiredDescription
alignmentEAlignmentNo—
contentMode'fit' | 'fill'No—
rationumber | [number, number]No—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

AngularGradient

AngularGradient sweeps color stops around a center point.

AsyncImage

AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's `AsyncImage` mental model.