Components

Canvas

Canvas exposes the browser's drawing surface with a SwiftUI-style dedicated component wrapper.

Example

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

Default

Loading preview…

Code
'use client';
import type { ComponentProps } from 'react';
import { Canvas } from '@swiftuijs/ui';
export default function Example() {
    const args: ComponentProps<typeof Canvas> = {
        'aria-label': 'Example canvas',
        height: 180,
        width: 320,
    };
    return ((<Canvas {...args} draw={(context) => {
            context.fillStyle = '#007AFF';
            context.fillRect(16, 16, 288, 148);
        }}/>));
}

Status: adapted

Usage and limitations

  • Rendering is delegated to the supplied draw callback.
  • The current implementation targets a 2D context.

API reference

PropTypeRequiredDescription
draw(context: globalThis.CanvasRenderingContext2D) => voidNoDrawing callback invoked with a 2d rendering context when available.

Inherits additional props from Omit<IBaseElementComponent<'canvas'>, 'children'>.

Edit this page on GitHubReport an issue

Button

A native HTML button with SwiftUI-inspired styling. Pass ordinary button props and an `onClick` handler; use `type="submit"` inside a form.

Card

Visually group related content in an elevated container.