ComponentsShape

Circle

Draw a circular shape.

Example

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

Default

Loading preview…

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

With Stroke

Add a stroke to the circle:

Usage and limitations

  • Set equal width and height for a predictable circle. fill is optional; it controls the CSS fill color.
  • Use optional stroke/strokeWidth for a border. Keep size and contrast consistent when used as a badge, avatar or indicator.

More examples

With Stroke

API reference

PropTypeRequiredDescription
fillstringNoFill color
strokestringNoStroke color
strokeWidthnumberNoStroke width

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Capsule

Capsule renders a pill-shaped surface with fully rounded ends, aligned with SwiftUI's `Capsule` mental model.

Ellipse

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