Components

Grid

Grid arranges content in explicit rows and columns, following SwiftUI's non-lazy grid model.

Example

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

Default

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { GridRow } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { Grid } from '@swiftuijs/ui';
export default function Example() {
    return ((<Grid columns={2} spacing={12}>
      <GridRow>
        <Card><Text>One</Text></Card>
        <Card><Text>Two</Text></Card>
      </GridRow>
      <GridRow>
        <Card><Text>Three</Text></Card>
        <Card><Text>Four</Text></Card>
      </GridRow>
    </Grid>));
}

API reference

PropTypeRequiredDescription
columnsnumberNoNumber of columns in the grid. Default: 1
spacingnumberNoSpacing between rows and columns, in pixels. Default: 0

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Glass

Add an optional glass material to a custom control surface.

GridRow

GridRow defines a single row inside `Grid`.