All UI Components

This is a reference of every UI component Layerz provides. To learn how to add a component to a Page, see Adding Components; for editing properties, see the Inspector. Every component can be bound to data or have an Action Flow connected to an event.

Standard

View

An empty area used to build your UI. Nest Views to create your layout structure, and set background color, borders, corners, shadows, gradients, and more. Add an image or SF Symbol in the Image section to use it for displaying images as well. Make the corners Capsule and set width and height equal to create an oval (circle).

• Binding: image

Effect

A view with a Blur or Glass effect applied. Place it over other content to blur the background or give it a glass texture. (Glass requires iOS 26 or later.)

Image

Displays an image. Choose an image registered in your project or an SF Symbol, and specify how it is filled (Content Mode).

• Binding: image — e.g., an image URL from an API response

Label

The most basic component for displaying text. Set its content, color, font, alignment, and number of lines. Use Auto Size together with Auto Layout to have it resize automatically to fit its content.

• Binding: text (string/number), text color

Container

List

A list that repeats cells of the same shape. You can divide it into Sections with Headers/Footers. When you bind array data, the cells repeat automatically for each item. → List

Stack

A container that aligns and groups multiple views vertically or horizontally. Set Axis, Distribution, Alignment, and Spacing. → Stack

Control

Button

Starts an action when pressed. Set its Type (Plain/Gray/Tinted/Filled/Glass, etc.), icon, color, size, and corners. The key is connecting an Action Flow to its Touch event.

• Binding: foreground color, background color, enabled / Event: yes

Text Field

Accepts a single line of text input. Set its placeholder, font, color, alignment, Border Style, and Clear Button.

• Binding: text (string) — two-way, enabled

Text View

Inputs or displays long, multi-line text. You can specify whether it is editable.

• Binding: text (string) — two-way

Activity Indicator

A loading indicator that shows work is in progress. Set its Style and color.

Segmented Control

A control for selecting one of several options. Build the segment items as text.

• Binding: enabled

Slider

Selects a continuous value within a range. Set the minimum and maximum values, the icons at each end, and the thumb and track colors.

• Binding: value (number) — two-way, enabled

Toggle

Switches between two states, on and off. Often used like an on/off setting.

• Binding: state (boolean) — two-way

Stepper

Adjusts a value step by step with increment/decrement buttons. Set the value, the step increment, and the minimum and maximum values.

• Binding: value (number) — two-way, enabled

Page Control

Shows the current position among several pages as dots. Set the number of pages and the dot colors/images.

• Binding: enabled

Progress

Shows the progress of a task from 0 to 1. Set the style (linear/circular) and color.

• Binding: progress (number)

Map

An interactive map based on MapKit. Set the map type, whether Zoom/Scroll/Rotate/Pitch are enabled, and the displayed area (Edit Region).

• Binding: latitude, longitude

Color Well

Tap it to open the system color picker.

• Binding: color — two-way

Date Picker

Selects a date and/or time. Set the Mode (Time Only / Date Only / Date and Time) and Style (Auto / Wheels / Compact / Inline).

Calendar

Embeds a full calendar on the screen. Use it when you want to show a month-at-a-time calendar as-is.

Web

Displays web content inside your app. Enter a URL to load the page, and use the Web View control actions in an Action Flow to load, refresh, and go back/forward.

• Binding (read): isLoading, loadingProgress, pageTitle, pageURL, canGoBack, canGoForward