Rectangle

<Rectangle fill="#007AFF" style={{ width: '200px', height: '100px' }}></Rectangle>

<Rectangle fill="#007AFF" stroke="#0051D5" strokeWidth={2} style={{ width: '200px', height: '100px' }}></Rectangle>

<VStack spacing={10}>
      <HStack spacing={10}>
        <Rectangle fill="#007AFF" style={{ width: '100px', height: '50px' }} />
        <Text>Blue</Text>
      </HStack>
      <HStack spacing={10}>
        <Rectangle fill="#34C759" style={{ width: '100px', height: '50px' }} />
        <Text>Green</Text>
      </HStack>
      <HStack spacing={10}>
        <Rectangle fill="#FF9500" style={{ width: '100px', height: '50px' }} />
        <Text>Orange</Text>
      </HStack>
    </VStack>

Overview

Rectangle is a rectangular shape. Rectangle is used to create rectangular visual elements, such as cards, backgrounds, and containers.

SwiftUI Correspondence: Similar to SwiftUI's Rectangle.

With Stroke

Add a stroke to the rectangle:

Colors

Display rectangles with different colors:

Notes

• Rectangle requires fill prop for fill color
• Rectangle requires explicit dimensions via style prop
• Rectangle supports optional stroke and strokeWidth props
• Rectangle has sharp corners (use RoundedRectangle for rounded corners)
• Use Rectangle for backgrounds, cards, and containers

Best Practices

1. Dimensions: Always provide explicit dimensions
2. Fill color: Always provide a fill color
3. Stroke: Use stroke for borders and outlines
4. Rounded corners: Use RoundedRectangle for rounded corners
5. Accessibility: Ensure rectangles have sufficient contrast