Components

List

Group rows and sections in a list-style container.

Example

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

Default

Loading preview…

Code
'use client';
import { VStack, Text, Divider } from '@swiftuijs/ui';
import { List } from '@swiftuijs/ui';
export default function Example() {
    return (<List>{(<VStack spacing={0}>
        <div style={{ padding: '15px' }}><Text>Item 1</Text></div>
        <Divider />
        <div style={{ padding: '15px' }}><Text>Item 2</Text></div>
        <Divider />
        <div style={{ padding: '15px' }}><Text>Item 3</Text></div>
      </VStack>)}</List>);
}

With Sections

Organize list items into sections:

With Actions

Add interactive elements to list items:

Custom Styling

Apply custom styles to List:

Usage and limitations

  • Accepts React children; use consistent row padding, Divider for separation, and Section for named groups.
  • Place long lists in a bounded ScrollView or page scroll area. This component mounts all rows; use a lazy layout or pagination for large datasets.
  • Row controls need their own labels and keyboard behavior.

More examples

Simple List
With Sections
With Actions
Custom Styling

API reference

This component currently relies on inherited element props.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Link

Open a URL through a native anchor.

MapView

MapView embeds a coordinate-based map surface using a web map provider while keeping SwiftUI's location-focused mental model.