The Launchpad library provides 18 production-ready preset components that serve as the fundamental building blocks for both native (iOS/Android) and web (PWA + Server Side Render) applications.

Core Layout Elements

These components are the primary, atomic units for constructing any user interface.

• View: The most basic building block, similar to a <div> in web design. It's used to wrap other components and create complex layouts, such as rows and columns.
• Text: Used for displaying all text content in a Layout, from paragraphs to headers.

Data Structuring and Repeater

These components are designed to manage data flow and efficiently render collections of items.

• Data Zone: A container component that provides a data context to its children (e.g., from a Flow, form, or environment variables). It can manage complex view states via Slots for different views, such as loading, success, or error.
• Carousel, Grid, & List: These components are used to render collections of data in different formats:
• • Carousel: Renders data as a list of horizontal cards that the user can swipe.
  • Grid: Renders data in a column-based layout with a specified or dynamic number of columns.
  • List: Renders data as a simple vertical list.

💡💡💡 Tip 💡💡💡
For more customization and better performance optimization, using the Grid type configured with a single column is recommended over the List component.

User Input and Forms

A set of components for capturing user data and building interactive forms.

💡💡💡 Tip 💡💡💡

All Form Components should be placed within a Data Zone component set to the Form Data Source.

• Text Input: Produces a single-line or multiline text input field for capturing user text.
• Selection Group: Allows you to present a list of options where a user can select one (Single Mode) or multiple (Multiple Mode) items.
• Toggle: An input component that functions as an on/off switch.
• Price Slider: A specialized input for defining a price range, composed of highly customizable nested elements like Min Pointer and Max Pointer.

Specialized Containers and Navigation

These components are wrappers that add specialized behavior or structural functionality to their children.

• Accordion: Consists of a Header container and a Content container that can be expanded or collapsed based on a user's click or tap interaction.
• Scroll View: A container component that allows its contents to scroll independently within a defined, fixed size.

💡💡💡 Tip 💡💡💡

Avoid using Scroll View for large product or data lists, as it loads its entire contents into memory immediately, unlike Grid or List.

• Link: A container component that makes a click or tap event on any of its children trigger a navigation action to a path specified by the Link To property.
• Background Image: A View with a nested Image component that fills the container. Crucially, it allows other components to be layered on top of the image.
• Web Content (Native Only): Embeds an entire webpage or website into a native application, acting as an embedded mini web browser.

Media and Information Display

Components dedicated to displaying rich media or providing visual feedback.

• Image: Used to display an image asset visually. Its behavior is controlled by the Resize Mode property (e.g., Cover, Contain), which dictates how the image fits within the container's dimensions.
• Video: Displays a video file from a URI or project asset.
• HTML View: Allows you to add and render raw HTML content inside a container, useful for displaying content from external APIs.
• Rating: Displays a configurable number of filled-in stars to visually communicate an average rating.
• Progress Bar: Gives visual feedback to users to indicate the current amount of progress for a process, defined by a Value relative to Min and Max properties.