A block is a ready-made pattern built from components: a whole choice screen, a gated continue button, a hero section, a testimonial card. Instead of placing primitives one by one, you pick a block and it drops in fully assembled. Many blocks also wire themselves up for you by creating a backing variable and the conditional values that style or gate the result.
Blocks are a starting point. Once a block is inserted it expands into normal components that you can edit, restyle, and delete freely. It does not stay “linked” to the preset.
How to add a block
Select a screen
Blocks insert into the selected screen, so a screen must be selected. Until then the panel shows “Select a screen to add blocks”.
Open Insert > Blocks (or Screens)
In the left sidebar click Insert. Blocks holds everything that drops into the current screen. Screens holds full-screen templates (covered below). A Recently Used group appears in Blocks once you have inserted a few.
Pick a block
Click a block. If it has a wizard, a dialog opens so you can fill in labels, options, and a variable name; click Insert Block to finish. Blocks without a wizard insert immediately.
A block inserts as a sibling right after the currently selected component, or into the screen’s Root Stack if nothing inside the screen is selected. Full-screen templates from the Screens tab replace the screen’s contents (you are asked to confirm if the screen already has content).
The block catalog
Blocks are organized into the categories below. Wizards let you customize labels and variable names before inserting; where a block “auto-creates” a variable, the wizard’s Variable name field is optional and defaults to a generated name.
Selection
For “pick one” or “pick many” questions. Each option’s tap writes to a bound variable, and the selected option is highlighted with a conditional background and border.
| Block | What it inserts | Auto-creates | Wizard |
|---|
| Single Choice List | A vertical list of selectable options bound to one variable. | A string variable (choice_*). Each option’s onPress sets it. | Yes |
| Multi Choice List | A list where several options can be selected at once. | A list variable (choices_*). Each option toggles its value in the list. | Yes |
| Choice Grid | A 2-column grid of selectable option cards. | A string variable (choice_*). | Yes |
| Choice Chips | A wrapping row of selectable tag chips. | A list variable (choices_*). Chips toggle on and off. | Yes |
Navigation
Continue and skip patterns. A “gated” button stays disabled (and dimmed to 0.5 opacity) until its gate variable has a value.
| Block | What it inserts | Auto-creates | Wizard |
|---|
| Gated Continue | A Continue button disabled until a choice is made. On press it clears the gate variable and runs goNext. | Nothing. It binds to an existing variable (the wizard auto-detects choice variables in your flow). | Yes |
| Skip + Continue | A two-button row: Skip (secondary) and Continue (primary). Both run goNext. | Nothing. | No |
| Gated Skip + Continue | A row where Skip always works and Continue is gated on a variable. | Nothing. It binds to an existing variable. | Yes |
Chrome
Back, close, and progress. These are meant for the persistent zones (navigation bar, footer), not the body of a screen.
| Block | What it inserts | Auto-creates | Wizard |
|---|
| Back Button | A button (chevron icon) whose onPress runs goBack. | Nothing. | No |
| Close Button | A button (X icon) whose onPress runs closeFlow. | Nothing. | No |
| Progress Bar | A progress component in auto mode that tracks flow progress. This is how you add the linear progress bar. | Nothing. | No |
Content
Display patterns made of text, images, and icons. None create variables.
| Block | What it inserts | Wizard |
|---|
| Card | A surface container (a styled stack with padding, rounded corners, and a shadow) holding a title and body text. Replaces the old card primitive. | No |
| Chip | A pill-shaped label (a styled stack). Replaces the old chip primitive. | No |
| Hero Section | An image with a title and subtitle. | No |
| Feature Highlight | A row with an icon, a title, and a description. | No |
| Benefit List | Three feature rows, each with an icon, title, and description. | No |
| Step Indicator | A numbered step badge with a “Step 1 of 3” style label. | No |
| Block | What it inserts | Auto-creates | Wizard |
|---|
| Text Input | A labeled text field. | A string variable (input_*). | Yes |
| Email Input | A labeled email field. | A string variable (input_email_*). | Yes |
| Multi-Field Form | Several labeled fields stacked vertically. | One string variable per field. | Yes |
| Checkbox | A tappable row whose icon swaps between checked and unchecked. On press it toggles a boolean. | A boolean variable (checkbox_*). | Yes |
Social Proof
Trust and credibility patterns. None create variables.
| Block | What it inserts | Wizard |
|---|
| Testimonial Card | A quote with an avatar, name, and title. | No |
| Stat Counter | A large number with a label, for “Join 50,000+ users” patterns. | No |
| Rating Badge | A star rating with a score and review count. | No |
Screens (the Screens tab)
Full-screen templates that build out an entire screen at once. These live in the Screens inner tab, not Blocks. Applying one to a screen that already has content asks you to confirm before replacing it.
| Template | What it builds | Auto-creates | Wizard |
|---|
| Choice Screen | Title, subtitle, single-choice list, and a gated Continue button, all wired together. | A string variable (choice_*); the Continue button is gated on it. | Yes |
| Welcome Screen | A hero image, title, subtitle, and a Get Started button (goNext). | Nothing. | Yes |
| Input Collection | Title, subtitle, form fields, and a Continue button. | One string variable per field (input_*). | Yes |
| Feature Tour | Title, subtitle, a three-item benefit list, and a Continue button. | Nothing. | Yes |
| Social Proof | Title, subtitle, a stats row, a testimonial card, and a Continue button. | Nothing. | Yes |
How auto-wiring works
When a block creates a variable, it also creates the conditional values that read it. For example, a Single Choice List option uses a conditional background color: “when choice_x equals option_2, use the selected color, else the default”. A Gated Continue button uses a conditional disabled value: “when the gate variable is empty, disabled is true”.
That is why the variable name matters. If you rename the variable a block created without updating the components that read it, the highlighting and gating stop working. Edit the variable name in the wizard before inserting, or rename consistently afterward in the Variables panel.
Example: a gated choice screen, the manual way
The Choice Screen template does all of this in one click, but it helps to see the pieces:
- Insert a Single Choice List block. It creates a
string variable, say choice_a1b2, and a list of options that each set it on tap.
- Insert a Gated Continue block below it. In its wizard, set Gate variable to
choice_a1b2 (the wizard usually auto-detects it).
- Now the Continue button is disabled and dimmed until the user selects an option, then enables and runs
goNext.
Common mistakes
- Inserting Gated Continue with no choice variable. The button has nothing to gate on and stays disabled forever. Add a choice block first. The wizard warns “No choice variables detected” when it cannot find one.
- Renaming an auto-created variable without updating its bindings. The conditional styling and gating still point at the old key. Rename in the wizard, or update every reference in the Variables panel.
- Expecting a block to stay linked to the preset. It does not. On insert it expands into normal components. Editing it never changes the original block.
- Putting chrome blocks in a screen. Back, Close, and Progress Bar belong in zones so they persist across screens. Placing them in the screen body works but they will not stay put as the user moves through the flow.
- Applying a Screen template over real work. Screen templates replace the screen’s contents. Confirm the replace prompt only if you mean to start over.
Related pages
