ComponentsShape

RoundedRectangle

Draw a rectangle with rounded corners.

Example

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

Default

Loading preview…

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

Different Corner Radius

Adjust the corner radius:

Usage and limitations

  • Set width and height explicitly. fill and cornerRadius are optional; corner radius defaults to 8.
  • Use stroke/strokeWidth for a border. Keep corner radii consistent and check contrast when used behind controls or content.

More examples

Different Corner Radius

API reference

PropTypeRequiredDescription
fillstringNoFill color
strokestringNoStroke color
strokeWidthnumberNoStroke width
cornerRadiusnumberNoCorner radius Default: 8

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Rectangle

Draw a rectangular shape with square corners.

UnevenRoundedRectangle

UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.