ComponentsShape

Rectangle

Draw a rectangular shape with square corners.

Example

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

Default

Loading preview…

Code
'use client';
import { Rectangle } from '@swiftuijs/ui';
export default function Example() {
    return (<Rectangle fill="#007AFF" style={{ width: '200px', height: '100px' }}></Rectangle>);
}

With Stroke

Add a stroke to the rectangle:

Colors

Display rectangles with different colors:

Usage and limitations

  • Set width and height explicitly. fill is optional; stroke and strokeWidth add a border.
  • Use for backgrounds or visual containers with sufficient contrast; use RoundedRectangle for rounded corners.

More examples

With Stroke
Colors

API reference

PropTypeRequiredDescription
fillstringNoFill color
strokestringNoStroke color
strokeWidthnumberNoStroke width

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Ellipse

Ellipse renders an oval surface inside the supplied frame, aligned with SwiftUI's `Ellipse`.

RoundedRectangle

Draw a rectangle with rounded corners.