MeshGradient
MeshGradient adapts SwiftUI's mesh gradient concept into a layered CSS radial-gradient surface for the web.
MeshGradient adapts SwiftUI's mesh gradient concept into a layered CSS radial-gradient surface for the web.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<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>API
| Prop | Type | Required | Description |
|---|---|---|---|
colors | string[] | Yes | No description yet. |
height | number | Yes | No description yet. |
points | Array<[number, number]> | Yes | No description yet. |
width | number | Yes | No description yet. |
Inherits additional props from IBaseComponent.
Overview
MeshGradient adapts SwiftUI's mesh gradient concept into a layered CSS radial-gradient surface for the web.
Status: adapted
SwiftUI Correspondence: Adapted from SwiftUI's MeshGradient.
Notes
pointsare normalized coordinates from0to1- each color maps to the point at the same index
- this adaptation favors static visual fidelity over editable mesh handles
Menu
Menu is a view that displays a menu of options. Menu presents a list of actions that can be triggered by the user, typically shown as a dropdown or popover.
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.