ComponentsShape
UnevenRoundedRectangle
UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Default
Loading preview…
Code
'use client';
import { UnevenRoundedRectangle } from '@swiftuijs/ui';
export default function Example() {
return (<UnevenRoundedRectangle fill="#0a84ff" cornerRadii={{
topLeading: 24,
topTrailing: 8,
bottomLeading: 12,
bottomTrailing: 32,
}} style={{ width: '180px', height: '120px' }}></UnevenRoundedRectangle>);
}Status: adapted
More examples
Stroke Variant
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
cornerRadii | IUnevenRoundedRectangleCornerRadii | No | — |
fill | string | No | — |
stroke | string | No | — |
strokeWidth | number | No | — |
Inherits additional props from IBaseComponent.