Components

Card

Visually group related content in an elevated container.

Example

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

Default

Loading preview…

Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { Card } from '@swiftuijs/ui';
export default function Example() {
    return (<Card>{(<VStack spacing={10} style={{ padding: '20px' }}>
        <Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Card Title</Text>
        <Text>Card content goes here</Text>
      </VStack>)}</Card>);
}

Usage and limitations

  • Accepts ordinary React children and style/className overrides; suitable for lists and grids.
  • Use consistent padding and styling. A card does not supply interaction or an accessible heading automatically.

More examples

With Image
With Buttons
Multiple Cards
Custom Styling

API reference

This component currently relies on inherited element props.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Canvas

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

Chart

Chart presents numeric series as either bar or line marks.