Components

ContentMargins

Adds configurable content insets using SwiftUI-style edge semantics.

Example

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

Default

Loading preview…

Code
'use client';
import { Card, ContentMargins, Text } from '@swiftuijs/ui';
export default function Example() {
    return ((<ContentMargins>
      <Card>
        <Text>Regular content margin wrapper</Text>
      </Card>
    </ContentMargins>));
}

More examples

Edge-specific margins

API reference

PropTypeRequiredDescription
edgesContentMarginEdge[]No—
valuenumber | string | 'compact' | 'regular'No—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

ContainerRelativeFrame

Sizes content relative to its container using SwiftUI-style count, span, and spacing semantics.

ContentTransition

ContentTransition adapts SwiftUI's content-transition modifiers into brief feedback when its content changes.