RoundedRectangle

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

<VStack spacing={10}>
      <VStack spacing={5}>
        <RoundedRectangle fill="#007AFF" cornerRadius={4} style={{ width: '200px', height: '50px' }} />
        <Text>Radius: 4</Text>
      </VStack>
      <VStack spacing={5}>
        <RoundedRectangle fill="#007AFF" cornerRadius={12} style={{ width: '200px', height: '50px' }} />
        <Text>Radius: 12</Text>
      </VStack>
      <VStack spacing={5}>
        <RoundedRectangle fill="#007AFF" cornerRadius={20} style={{ width: '200px', height: '50px' }} />
        <Text>Radius: 20</Text>
      </VStack>
    </VStack>

Overview

RoundedRectangle is a rectangular shape with rounded corners. RoundedRectangle is commonly used for cards, buttons, and modern UI elements.

SwiftUI Correspondence: Similar to SwiftUI's RoundedRectangle.

Different Corner Radius

Adjust the corner radius:

Notes

• RoundedRectangle requires fill and cornerRadius props
• RoundedRectangle requires explicit dimensions via style prop
• cornerRadius controls the roundness of corners
• RoundedRectangle supports optional stroke and strokeWidth props
• Use RoundedRectangle for cards, buttons, and modern UI elements

Best Practices

1. Corner radius: Use consistent corner radius values
2. Dimensions: Always provide explicit dimensions
3. Fill color: Always provide a fill color
4. Modern design: RoundedRectangle is ideal for modern, friendly designs
5. Accessibility: Ensure rounded rectangles have sufficient contrast