Components

Components are the building blocks of a screen. They are the lowest-level pieces in a flow: a piece of text, an image, a button, a stack that holds other components. There are 15 component kinds in total, and every one renders end to end (editor canvas, the SDK on device, and the dashboard preview) so what you build is what ships. This page explains what each component is and when to reach for it. For the full per-property tables (every prop, type, and default), see the Component reference.

Raw components are an Advanced mode surface. In Simple mode you do not place primitives directly; you build from certified blocks (where even a heading or image is a block). The 15 kinds below are still what every block is composed of, on both platforms.

How to add a component

Select a screen (or a zone)

The Components palette is disabled until you select something to add to. Select a screen in the Layers panel, or select a persistent zone. With nothing selected you see “Select a screen or chrome section to add components”.

Open Insert > Components

In the left sidebar click Insert, then stay on the Components inner tab. The list is grouped into Layout, Display, Interactive, and Form.

Drag it, or click it

Each row works two ways. Drag a row onto the canvas to drop it exactly where you want, or click the row to add it. A click adds the component as a sibling right after the currently selected component, or into the screen’s Root Stack if nothing inside the screen is selected.

Drag and click are mutually exclusive on a single gesture: a quick click never starts a drag, and a drag never fires a click. Use whichever feels natural.

Use the search box at the top of the palette to filter by name or description.

The 15 component kinds

This is the complete, authoritative list. Nothing else is a component kind.

Component	What it is	Typical use
`screenRoot`	The implicit root of every screen, shown as Root Stack in the Layers panel.	You do not add this. It is created with the screen and holds the screen’s components.
`stack`	A flexible layout container (vertical or horizontal). The only layout primitive.	Group and arrange components. Also used for spacers (`flex: 1`) and separators (a thin styled stack).
`text`	A run of text.	Headlines, body copy, labels. Double-click on the canvas to edit the wording inline.
`image`	A static image loaded from a URL.	Hero images, illustrations, avatars.
`button`	A tappable button with a label and `onPress` interactions.	Calls to action, “Continue”, custom navigation.
`input`	A text entry field, labeled Text Input in the palette.	Collect typed input. Bind it to a variable to capture what the user types.
`toggle`	An on/off switch bound to a boolean.	Opt-ins, settings, yes/no answers.
`progress`	A linear progress bar. In `auto` mode it tracks the user’s progress through the flow.	A progress indicator in a zone. Added through the Progress Bar block, not from this palette (see below).
`ringProgress`	A circular progress ring with a center slot.	Loading and “calculating” moments, score dials.
`icon`	A named icon (for example `Star`).	Decorative or semantic icons. Use this instead of an `image` for icons.
`slider`	A numeric range control, with optional modern styling (gradient fill, pill thumb, large readout).	Let the user pick a number in a range (weight, budget, intensity). Pre-styled Sliders blocks add the gradient look.
`lottie`	A vector animation played from a Lottie JSON URL.	Rich animated illustrations and celebrations.
`comparisonChart`	A two-series line chart (“with us” vs “without us”).	Before/after and value-over-time comparisons.
`picker`	A scroll-snapping value wheel with one or more columns (date mode for day/month/year).	Age, height/weight, date of birth. Usually added through a Pickers block.
`custom`	A reference to a native component implemented in your app.	Native UI the flow engine does not provide. See Custom components.

What is and is not in the Components palette

The Insert > Components palette shows 12 of these kinds, grouped as:

Layout: Stack
Display: Text, Image, Icon, Ring Progress, Lottie, Comparison Chart
Interactive: Button
Form: Text Input, Slider, Picker, Toggle

The other three kinds are added elsewhere:

screenRoot is the implicit Root Stack. It is created with each screen, so you never add it by hand.
progress (the linear bar) is not a palette primitive. Add it with the Progress Bar block (Insert > Blocks > Chrome), which inserts a progress component in auto mode.
custom is your own native component. It lives in the Custom tab and appears at the bottom of the Components palette once you define it. See Custom components.

Components that no longer exist

To save you hunting for them, these were removed and are not component kinds:

No spacer or divider. Use a stack with flex: 1 for flexible space, or a thin styled stack for a separator line.
No card or chip primitive. These are now one-click blocks (Card and Chip) that expand into a styled stack.
No carousel, video, or chart primitive. comparisonChart replaced the old chart.

Example: a simple content screen

A typical screen is a Root Stack holding a few primitives:

Screen 1
└─ Root Stack (vertical)
   ├─ Icon:   "Sparkles"
   ├─ Text:   "You are all set"         (fontSize 28, bold)
   ├─ Text:   "Here is what comes next" (fontSize 16, muted)
   └─ Button: "Continue"  ->  onPress: goNext

Every piece here is a single component you dragged from Insert > Components. To arrange them, nest them in stacks and set spacing and alignment on the stack. See Layout and sizing.

Common mistakes

Looking for a spacer. There isn’t one. Add a stack and set flex: 1 to push content apart, or give a stack a fixed height for a gap.
Looking for Progress in the Components tab. The linear progress bar is the Progress Bar block under Insert > Blocks > Chrome, not a Components primitive.
Confusing progress and ringProgress. progress is the linear bar (good for a header progress indicator). ringProgress is the circular ring (good for a loading dial).
Using an image for an icon. Use the icon component with a named icon. It scales and recolors cleanly. Reserve image for photos and illustrations.
Expecting Card or Chip in Components. They are blocks, not primitives. They drop in as a styled stack you can edit freely.

Basics

Simple mode

Adding content

Styling & layout

Motion

Logic & data

Persistent UI

Preview & publish

How to add a component

The 15 component kinds

What is and is not in the Components palette

Components that no longer exist

Example: a simple content screen

Common mistakes

​How to add a component

​The 15 component kinds

​What is and is not in the Components palette

​Components that no longer exist

​Example: a simple content screen

​Common mistakes

​Related pages

How to add a component

The 15 component kinds

What is and is not in the Components palette

Components that no longer exist

Example: a simple content screen

Common mistakes

Related pages