There are 14 component kinds. Every component is a ComponentNode with an id, a type, and an untyped props bag. This page lists each kind and the props the renderers read.
Props are stored as Record<string, any>. The names below are the keys the iOS SDK reads (ComponentProps) plus the intended shapes documented in the schema. A prop can be a plain value or a dynamic (conditional) value; string props also support {{variable}} interpolation.
Universal props
These apply to every visible component (a few do not apply to screenRoot or custom, noted in those sections).
| Group | Props |
|---|
| Visibility | isVisible (bool), visibility (string), opacity (0 to 1), disabled (bool) |
| Size | width, height, minWidth, maxWidth, minHeight, maxHeight (number px, "NN%", or "auto"/"fill") |
| Padding | paddingVertical, paddingHorizontal, paddingTop/Bottom/Left/Right, paddingAdvanced (bool) |
| Margin | marginTop, marginBottom, marginLeft, marginRight |
| Corner radius | cornerRadius, cornerAdvanced (bool), cornerTopLeft/TopRight/BottomLeft/BottomRight |
| Border | borderWidth, borderColor, borderStyle, borderOpacity |
| Background | backgroundColor, fill, overflow |
| Shadow | boxShadowColor, boxShadowOpacity, boxShadowX, boxShadowY, boxShadowBlur, boxShadowSpread, boxShadowInner |
| Position | positionType (normal/relative/absolute/fixed/sticky), top, right, bottom, left, zIndex |
| Press feedback | pressFeedback object { style, scale, opacity, pressDuration, releaseDuration } |
| Attention | attention object { effect, duration, delay, repeat, intensity } |
| Animation | animations (step timeline), plus legacy animateOn/animOpacity/animScale/… |
screenRoot
The implicit root container of a screen, rendered as the “Root Stack”. Treated as a stack; it exposes stack layout props (axis, spacing, align, justify) and spacing only. It is not added from the palette.
stack
A flex container. The primary layout primitive. Children render along an axis.
| Prop | Type | Notes |
|---|
axis | "vertical" | "horizontal" | "layered" | Also accepts legacy direction. |
spacing | number | Gap between children. Also accepts legacy gap. |
justify | string | Main-axis distribution (Top/Center/Bottom/Fill Equally/Space Evenly/Space Around/Space Between, or Left/Center/Right by axis). |
align | string | Cross-axis alignment. |
wrap | string | Wrap behavior. |
scrollBehavior | "no-scroll" | "scroll" | "paginated" | "infinite" | Scrolling. |
staggerChildren | bool | Stagger children’s appear animations. |
staggerInterval | number | Ms between each child (default 80). |
staggerOrder | "natural" | "reverse" | "center-out" | "random" | Stagger order. |
staggerHaptic | "none" | "tick" | "ramp" | Per-child haptic. |
onAppear and onPress interactions.
text
A text label.
| Prop | Type | Notes |
|---|
text | string | The content. Supports {{variable}} interpolation. |
color | string | Text color. |
fontSize | number | Point size (8 to 120). |
fontWeight | string | "100" to "900" or named weight. |
fontFamily | string | System, custom, or a Google font. |
textAlign | string | Left/Center/Right. |
lineHeight | number | Line height. |
letterSpacing | number | Tracking. |
textCase | string | Case transform. |
maxLines | number | Truncate after N lines. |
textEffect | object | { type, speed, delay, duration, cursor, cursorChar, haptic }. Types: typewriter, typewriterWord, fadePerLine, countUp, scramble. |
textRotation | object | Word cycling: { enabled, values[], interval, transition, transitionDuration, loop, pauseOnLast }. |
image
A remote or bundled image.
| Prop | Type | Notes |
|---|
src | string | Full http(s):// URL, a data: URL, or a relative path joined to the media base URL. |
alt | string | Alt text. |
fit | string | cover / contain / fill / tile. |
tintColor | string | Optional tint. |
| Prop | Type | Notes |
|---|
text | string | Button label. |
variant | "primary" | "secondary" | "ghost" | "destructive" | Resolves default colors against globalStyles.colors. Per-prop overrides win. |
color | string | Text color (overrides variant). |
fontSize, fontWeight, fontFamily, textAlign | | Label typography. |
iconSize | number | Size of an icon child. |
| layout/box props | | axis, spacing, justify, align, padding, backgroundColor, border, cornerRadius, shadow, width, height. |
onPress. A Back Button is a button with a goBack action; a Close Button is a button with a closeFlow action.
A text field. Reads and writes a bound variable.
| Prop | Type | Notes |
|---|
inputType | text / email / number / password / url / phone / multiline / search | Maps to the keyboard type. Also accepts legacy type. |
placeholder | string | Placeholder text. |
placeholderColor | string | Placeholder color. |
variableKey | string | The variable this field reads on appear and writes on change. |
maxLength | number | Character limit. |
rows | number | Visible rows for multiline. |
returnKeyType | string | Return key label. |
validation | object | { required, minLength, maxLength, pattern, patternMessage }. |
onChange, onFocus, onBlur (binding to the variable is implicit via variableKey).
toggle
A switch bound to a boolean variable.
| Prop | Type | Notes |
|---|
value | bool | Initial value (bound variable wins on load). |
variableKey | string | The boolean variable to read/write. |
activeColor | string | On color. |
inactiveColor | string | Off color. |
label | string | Optional label. |
onChange.
There is no checkbox component kind. A checkbox is composed as a Block (a tappable stack with an icon whose glyph swaps via a conditional value). Old checkbox nodes are migrated into that shape on load.
progress
A linear progress bar.
| Prop | Type | Notes |
|---|
mode | "auto" | "custom" | auto derives the value from screen position; custom uses value. |
value | number (0 to 1) | Progress when mode is custom. |
color | string | Fill color. |
trackColor | string | Track color. |
animateProgress | bool | Animate value changes. |
animationDuration | number | Ms. |
animationCurve | string | Easing. |
progress is not in the component palette; it is added via the Progress Bar block or in a zone.
ringProgress
A circular progress ring. A separate primitive from progress.
| Prop | Type | Notes |
|---|
mode | "determinate" | "indeterminate" | Default determinate. |
value | number (0 to 1) | Only meaningful when determinate. |
size | number | Outer diameter. Default 96. |
strokeWidth | number | Ring thickness. Default 8. |
color | string | Arc color. Default #4F46E5. |
trackColor | string | Background ring. Default #E5E7EB. |
animateOnAppear | bool | Animate value changes. Default true. |
animationDuration | number | Ms. Default 800. |
animationCurve | linear / ease-in / ease-out / ease-in-out | |
revealOnAppear | bool | Scripted reveal: animate 0 to value on appear, ignoring the variable. |
children | ComponentNode[] | Centered slot (usually one text or icon). |
icon
A vector icon (Lucide).
| Prop | Type | Notes |
|---|
iconName | string | Icon name. Accepts a conditional value so the glyph can be variable-driven. |
size | number | Glyph size. |
color | string | Glyph color. |
strokeWidth | number | Stroke width. |
slider
A numeric range control. Binds like input.
| Prop | Type | Notes |
|---|
min | number | Range minimum. Default 0. |
max | number | Range maximum. Default 100. |
step | number | Increment. Default 1. |
value | number | Initial value (bound variable wins on load). |
variableKey | string | Two-way binding (read on appear, written on change). |
trackColor | string | Unfilled track. Default #E5E7EB. |
fillColor | string | Filled portion. Default #4F46E5. |
thumbColor | string | Knob. Default #4F46E5. |
showValueLabel | bool | Show the current value. |
valueFormat | string | Display template, "{{value}}" is substituted (for example "{{value}} kg"). |
onChange.
lottie
A Lottie animation.
| Prop | Type | Notes |
|---|
src | string | Animation URL. Resolved like image src. |
autoplay | bool | Play on appear. Default true. |
loop | bool | Loop. Default true. |
speed | number | Playback multiplier. Default 1. |
width, height | number or string | Size. |
comparisonChart
A “you with us vs you without us” comparison curve.
| Prop | Type | Notes |
|---|
series | array | { label, color, points: [{x, y}], style?, showArea?, showEndDot?, animate? }. Capped at 5 series. |
xLabels | { start, end } | Axis end labels. |
yLabel | string | Y-axis label. |
markers | [{ x, label }] | Vertical annotations. |
animateOnAppear | bool | Draw curves on appear. Default true. |
animationDuration | number | Ms. Default 900. |
staggerSeries | bool | Reveal series in sequence. Default false. |
staggerDelay | number | Ms between series. Default 250. |
legend | bool | Show per-series legend. Default false. |
height | number or string | Chart height; width fills the parent. |
custom
An app-scoped custom component placed by reference. Custom components render as placeholder shells in the editor and resolve to your registered native view on iOS. They have limited layout props (no background, border, shadow, padding, typography, position, z-index).
Instance props (CustomComponentInstanceProps):
| Prop | Type | Notes |
|---|
customComponent | { key: string; version: number } | Reference to the definition (CustomComponentRef). version defaults to 1. |
inputs | Record<string, CustomComponentInputValue> | Per input: { source: "value", value } or { source: "bind", variable }. |
width | size mode or config | "content" / "fill" / number, or { mode, min?, max? }. |
height | size mode or config | Same shape as width. |
Notes
- Components removed from the schema (
spacer, divider, card, chip, carousel, video, checkbox, and the old placeholder chart) are rewritten or stripped by migrations on load. See Schema versions.
- Any prop the renderers do not read is ignored, not an error.
Related pages
