You can combine components freely to build anything from a single-page paywall to a multi-screen onboarding flow.

Each component supports a unique set of properties, which can be configured in the Right Panel. Below you’ll find an overview of all available components, grouped by category, with quick links to their common use cases and key properties.

Components Reference Table

Component	Parent	Actions	Description	Function
Container	✅	✅	Core layout block that groups and aligns other components.	Organizes and structures multiple elements
Button	✅	✅	A clickable call-to-action element	Triggers a purchase attempt or other action
Product	✅	✅	Displays a selectable product with customizable styling	Showcases in-app purchases or subscriptions
Heading	❌	❌	Text block for titles using the /h1 tag	Adds main headings or key messages
Text	❌	❌	Text block for descriptions, disclaimers, or variables using the /p tag	Adds body text, descriptions, or instructions
Toggle	❌	✅	Switch element for selecting between two states (e.g., Monthly vs. Yearly)	Changes product selection
Tabs	✅	❌	Segmented layout component for switching between different content states	Enables navigation between grouped sections
Tab	✅	❌	Child element inside Tabs	Holds content for a single tab view
Badge	✅	✅	Styled tag for emphasis (e.g., “Best Value,” “Limited Offer”).	Highlights products, offers, or section
Image/GIF	❌	❌	Displays static or animated visuals	Adds images or GIFs to enhance visual design.
Icon	❌	✅	Small decorative or functional icon element	Adds visual cues, or can be used as a closing button
Lottie	❌	❌	Vector animation file with dynamic scaling	Adds lightweight animations or motion effects
Video (coming soon)	❌	❌	Embeddable video player	Displays product demos or looping backgrounds
Slider	✅	❌	Parent container that holds multiple Slides	Enables swipeable multi-page content
Slide	✅	❌	Child component inside a Slider	Holds elements within each swipeable section
Header	✅	❌	Pre-built top section with standard layout and styling.	Used for consistent screen headers
Footer	✅	❌	Pre-built bottom section with standard layout and styling.	Used for CTAs, legal text, or navigation.

📘
Parent Components can contain other elements inside them.

Actions include functions like Make Purchase, Open URL, Go to Page, or Select Product and more.

Components can be freely combined to create custom layouts.

Layout Components

Container

The Container is the foundational layout block in the Builder. It’s used to group and align multiple elements and can be nested inside other containers for flexible layout control.

Use cases:

Creating columns, cards, or grouped sections
Holding text, buttons, and images together
Structuring responsive paywall layouts

Key properties:

Action
Layout (direction, distribution, wrap, gap)
Alignment
Position (static, relative, absolute, fixed, sticky)
Size (fill, fit, auto, fixed)
Spacing (margin, padding)
Background, Border, Shadow
Selected State (if linked to product)

💡
Tip: Use containers as “cards” for product blocks or grouped pricing sections.

Header / Footer (Pre-Built)

Pre-designed layout sections that maintain consistent structure across screens.

Header: Ideal for app logos, titles, or progress indicators.
Footer: Perfect for CTAs, purchase buttons, or legal text.

Important:

You can add only one Header and one Footer per screen.
Both are placed automatically at the top and bottom of the layout.
Their main property is Positioning, which is Static — they remain anchored in their respective places and do not scroll independently.

Key properties:

Alignment – controls horizontal content placement (Start, Center, End).
Padding / Background – adjust internal spacing and visual styling.
Typography – inherit or override font family, weight, and color for text elements.
Static Position – ensures Header and Footer stay fixed to screen boundaries (not scrollable).

Slider

A horizontal parent container used to create swipeable multi-step experiences.

Use for:

Onboarding flows
Multi-card offers or tutorials

Key properties:

Direction (horizontal)
Slide count
Gap between slides

Slide

A single page inside a Slider. Each slide has independent content and styling.

Use for:

Onboarding step
Product card or information screen

Key properties:

Background, Padding, Layout, Typography

Tabs

A segmented layout component for switching between grouped content areas.

Use for:

Switching between plans (Monthly, Annual, Lifetime)
Segmenting features or pricing groups

Key properties:

Tab Items (add / rename / reorder)
Linked Containers or Product Groups
Default Tab
Orientation (horizontal / vertical)
Active / Inactive styles

Tab

A single view or section within the Tabs component.

Use for:

Each pricing plan or content block linked to a tab selection.

Key properties:

Layout
Padding / Margin
Background

Text & Display Components

Heading

Large text element used for titles, section headers, or key messages.

Use for:

Paywall headline (“Upgrade to Premium”)
Onboarding step titles

Key properties:

Typography (font, weight, color, size and more)
Alignment
Margin / Padding
Variables (dynamic product data)

Text

Smaller text element used for supporting details or variable-based descriptions.

Use for:

Feature lists
Descriptions and disclaimers
Dynamic price or period text

Key properties:

Typography (font, color, size)
Alignment
Variables (e.g., products.product_id.price_per_month)
Margin / Padding

Badge

A small highlighted label that draws attention to offers or key information.

Use for:

“Best Value” or “Most Popular” tags
Promotional callouts

Key properties:

Text content
Style (solid / outline / soft)
Color and background
Border radius
Alignment

🗒️
Note: Badge can be attached only to container-based components.

Interactive Components

Button

Clickable call-to-action element that triggers an event or navigation.

Use for:

“Continue”, “Subscribe”, or “Buy Now” actions
Navigating between pages or screens

Key properties:

Action (Make Purchase, Select Product, Open URL, Go to Page, Show Screen)
Label text (supports variables)
Size and alignment
Background, Border, Shadow
Typography (font, color, weight)

Toggle

Switch component that changes between two or more states, commonly used for pricing options.

Use for:

Monthly ↔ Yearly plan switchers
Feature toggles

Key properties:

Options (labels for each state)
Default State
Linked Products or Containers
Action on Change
Background and active/inactive text colors

🗒️
Combine Toggles with Product Containers to dynamically user selection.
Changing Products on toggles is coming soon

Product Components

Product

A pre-built container displaying subscription or one-time purchase details. Automatically filled with data from your connected store.

Use for:

Main product or subscription cards
Price comparison layouts

Key properties:

Linked Product
Layout (vertical / horizontal)
Badge support
Product Variables (price, trial_period, currency)
Background, Border, Shadow
Action (Select Product, Make Purchase)
Selected State styling

💡
Tip: Group multiple Product components in one Container for multi-plan layouts.

Media Components

Image / GIF

Displays static or animated visual content.

Use for:

Product illustrations
Onboarding artwork
Decorative visuals

Key properties:

Source (upload or URL)
Fit (cover / contain)
Border radius / shadows
Alignment / Size
Action (optional, e.g., Open URL)

Lottie File

Vector-based animation file (.json) for smooth, scalable motion graphics.

Use for:

Onboarding animations
Success or loading states

Key properties:

Loop / Autoplay toggle
Playback speed
Alignment / Size

Icon

Simple decorative or functional symbol.

Use for:

Feature checkmarks
Navigation or visual cues

Key properties:

Icon set and name
Color and size
Alignment

Video (Coming Soon)

Embeddable video block for background loops or short product demos.

Planned properties:

Upload up to 150Mb
Autoplay / Loop toggle
Mute / Sound control
Cover fit

AI & Automation

AI Image Generation (Coming Soon)

Generate high-quality visuals directly inside the Builder using text prompts.

Planned features:

Input prompt + orientation tags (Portrait / Landscape / Abstract)
5 free generations per day
Direct image placement inside current screen

Component Quick Reference

Component	Purpose	Supports Actions	Has Children
Container	Groups and aligns elements	✅	✅
Header / Footer	Standard layout sections	❌	✅
Slider	Swipeable parent layout	❌	✅
Slide	Page inside slider	❌	✅
Tabs	Switchable segmented view	❌	✅
Tab	Individual tab section	❌	✅
Heading	Large text element	❌	❌
Text	Description or dynamic value	❌	❌
Badge	Highlight tag	✅	✅
Button	Interactive call-to-action	✅	❌
Toggle	Multi-state switch	✅	❌
Product	Pre-filled product card	✅	✅
Image / GIF	Static or animated image	❌	❌
Lottie	Animation file	❌	❌
Icon	Decorative element	✅	❌
Video	Embedded media (coming soon)	❌	❌

Best Practices

Start simple: use pre-built containers and headers to create clean layouts.
Use variables inside Text or Button components for dynamic pricing.
Link product actions early (Select Product, Make Purchase) to test your screen logic.
Preview frequently: test responsiveness on iOS, Android, and tablet devices.