Components

MeshGradient

MeshGradient adapts SwiftUI's mesh gradient concept into a layered CSS radial-gradient surface for the web.

Example

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

Default

Loading preview…

Code
'use client';
import { MeshGradient } from '@swiftuijs/ui';
export default function Example() {
    return (<MeshGradient width={320} height={200} colors={['#ff375f', '#5e5ce6', '#30d158', '#ffd60a']} points={[
            [0.15, 0.2],
            [0.8, 0.25],
            [0.35, 0.82],
            [0.82, 0.75],
        ]} style={{
            borderRadius: '24px',
        }}></MeshGradient>);
}

Status: adapted

Usage and limitations

  • points are normalized coordinates from 0 to 1
  • each color maps to the point at the same index
  • this adaptation favors static visual fidelity over editable mesh handles

API reference

PropTypeRequiredDescription
colorsstring[]Yes—
heightnumberYes—
pointsArray<[number, number]>Yes—
widthnumberYes—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Menu

Open a positioned menu of actions from a trigger.

MultiDatePicker

MultiDatePicker adapts SwiftUI's multi-date selection model to the web by combining a native date input with an ordered list of selected dates.