GeometryReader

'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { GeometryReader } from '@swiftuijs/ui';
export default function Example() {
    return ((<GeometryReader>
      {(geometry) => (<VStack spacing={10}>
          <Text>Width: {geometry.width}px</Text>
          <Text>Height: {geometry.height}px</Text>
          <Text>X: {geometry.x}px</Text>
          <Text>Y: {geometry.y}px</Text>
        </VStack>)}
    </GeometryReader>));
}

Responsive Layout

Create layouts that adapt to container size:

Dynamic Sizing

Size elements based on container dimensions:

Centered Content

Center content using geometry information:

Usage and limitations

• Children receive width, height, x, and y in pixels; the reader fills its parent.
• Initial geometry is zero during SSR and before measurement. Provide a stable initial layout and give the parent measurable space.
• Use measurements for sizing or positioning. Avoid expensive render calculations and circular size dependencies, especially with nested readers.