Skip to main content
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 14 component kinds in total, and every one renders end to end (editor canvas, iOS SDK, 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.

​
How to add a component

1

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”.
2

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.
3

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 14 component kinds

This is the complete, authoritative list. Nothing else is a component kind.
ComponentWhat it isTypical use
screenRootThe 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.
stackA 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).
textA run of text.Headlines, body copy, labels. Double-click on the canvas to edit the wording inline.
imageA static image loaded from a URL.Hero images, illustrations, avatars.
buttonA tappable button with a label and onPress interactions.Calls to action, “Continue”, custom navigation.
inputA text entry field, labeled Text Input in the palette.Collect typed input. Bind it to a variable to capture what the user types.
toggleAn on/off switch bound to a boolean.Opt-ins, settings, yes/no answers.
progressA 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).
ringProgressA circular progress ring with a center slot.Loading and “calculating” moments, score dials.
iconA named icon (for example Star).Decorative or semantic icons. Use this instead of an image for icons.
sliderA numeric range control.Let the user pick a number in a range (weight, budget, intensity).
lottieA vector animation played from a Lottie JSON URL.Rich animated illustrations and celebrations.
comparisonChartA two-series line chart (“with us” vs “without us”).Before/after and value-over-time comparisons.
customA 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 11 of these kinds, grouped as:
  • Layout: Stack
  • Display: Text, Image, Icon, Ring Progress, Lottie, Comparison Chart
  • Interactive: Button
  • Form: Text Input, Slider, 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.