Components

MatchedGeometryEffect

MatchedGeometryEffect adapts SwiftUI's matchedGeometryEffect modifier into explicit shared metadata on the web.

Example

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

Shared Card

Loading preview…

Code
'use client';
import { Button } from '@swiftuijs/ui';
import { HStack } from '@swiftuijs/ui';
import { MatchedGeometryEffect } from '@swiftuijs/ui';
export default function Example() {
    return ((<HStack spacing={12}>
      <MatchedGeometryEffect id="card" namespace="gallery" role="source">
        <Button style={{
            backgroundColor: 'transparent',
            border: '1px solid var(--sw-color-primary, #007aff)',
        }}>
          Compact card
        </Button>
      </MatchedGeometryEffect>
      <MatchedGeometryEffect id="card" namespace="gallery" role="target" properties="frame">
        <Button>Expanded card</Button>
      </MatchedGeometryEffect>
    </HStack>));
}

Status: adapted

Usage and limitations

  • Annotates source/target elements with geometry metadata and light CSS styling. It does not measure or animate shared geometry. For browser shared-element navigation, use NavigationLink with view-transition.

API reference

PropTypeRequiredDescription
idstringYes—
namespacestringYes—
role'source' | 'target'No—
properties'frame' | 'position' | 'size'No—
activebooleanNo—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

MapView

MapView embeds a coordinate-based map surface using a web map provider while keeping SwiftUI's location-focused mental model.

Menu

Open a positioned menu of actions from a trigger.