This guide lists all available property types, explains how they work, and shows which components support them.

Use it as a universal reference when customizing screens or troubleshooting layout behavior.

Property Overview

Property	Description	Supported Components
Action	Defines what happens when a component is tapped or clicked.	Button, Container, Product, Badge, Icon
Typography	Sets font family, size, weight, color, decorations, spacing, case and alignment for text elements.	Heading, Text, Button, all container-based components
Alignment	Controls how child components are aligned within a parent container. Direction depends on parent layout.	All components
Position	Defines element positioning (Static, Relative, Absolute, Fixed, Sticky).	All components except for Badge
Layout (Direction)	Sets stacking direction (Vertical ↓ or Horizontal →).	All container-based components
Distribution	Defines spacing logic between child elements (Start, Center, End, Space Between, Space Around, Evenly).	All container-based components
Wrap	Toggles whether children wrap to a new line.	All container-based components
Gap	Sets consistent spacing between child components.	All container-based components
Size (Width / Height)	Controls sizing: Fill, Fit Content, Auto, or Fixed values.	All components
Max / Min Size	Restricts maximum or minimum width and height.	All components
Spacing (Margin / Padding)	Defines internal (padding) and external (margin) spacing.	All container-based components
Background	Adds solid color, gradient, or image backgrounds.	All components
Border	Controls border width, color, and corner radius.	All components
Shadow	Adds soft elevation shadows for depth.	All components
Selected State	Provides alternate styling when an element is selected (used with Select Product action).	Container, Product (with assigned action Select Product)
Visibility, Opacity, Radius	Toggles whether a component is visible or hidden on screen.	All components
Variables	Displays dynamic values such as product prices, durations, or currency.	Text, Heading, and text-containing components (e.g. Badge)

Layout & Position Properties

Property	Description
Direction	Defines how child elements are stacked — vertically or horizontally.
Distribution	Controls alignment within available space (Start, Center, End, Space Between, Space Around, Evenly).
Alignment	Positions child components along the cross-axis (horizontal if layout is vertical, vertical if layout is horizontal).
Wrap	Allows child components to wrap into multiple rows or columns.
Gap	Adds uniform spacing between all direct child elements.
Position	Determines how a component is placed relative to others: Static – follows normal layout flow Relative – offsets from default position Absolute – positioned relative to parent container Fixed – sticks to screen while scrolling Sticky – toggles between relative/fixed depending on scroll

Size & Spacing Properties

These define how big your components appear and how they interact with surrounding elements.

Property	Description
Width / Height	Choose from: Fill – occupy all available space Fit Content – match child size Auto – adapt dynamically Fixed – set explicit pixel or % value
Max / Min Width & Height	Define boundaries for responsiveness.
Margin	External spacing between the component and neighboring elements.
Padding	Internal spacing between the component’s edges and its content.

Typography Properties

Text-related styling and variable configuration.

Property	Description
Font Family	Choose from 20 + fonts (System Font, Inter, SF Pro, Roboto, Lato, Poppins, etc.).
Font Size & Weight	Adjust headline or body emphasis.
Text Color	Set color for all text inside the component.
Alignment	Align text left, center, or right.
Variables	Insert dynamic text via macros — for example: products.product_id.price_per_month.

Visual Styling Properties

Used to adjust background, border, and visual depth of your components.

Property	Description
Background	Apply a solid color, gradient, or image fill.
Border	Set border width, color, and corner radius.
Radius	Set border Radius.
Shadow	Add soft drop shadows for elevated appearance.
Opacity	Adjust overall component transparency.

Behavioral Properties

Properties that define interactivity, visibility, and logic.

Property	Description
Action	Defines what happens on tap/click: Make Purchase Select Product Open URL Go to Page Go to Screen and more
Selected State	Available when “Select Product” action is used — customize active visuals (background, border, icons, etc.).
Visibility	Show / Hide component

Property

Description

Action

Defines what happens on tap/click:

Make Purchase
Select Product
Open URL
Go to Page
Go to Screen and more

Selected State

Available when “Select Product” action is used — customize active visuals (background, border, icons, etc.).

Visibility

Show / Hide component

Variables & Dynamic Content

Variables let you display real-time product data in text or buttons. They automatically update when prices, currencies, or trial durations change in the store

Example Variable	Description
products.product_id.price_per_month	Displays the monthly price of a product.
products.product_id.price_per_year	Displays the annual price.
products.product_id.trial_duration	Shows the trial period (e.g., “7 days free”).
products.product_id.currency_symbol	Displays the currency symbol ($, €, £, etc.).

💡
You can use variables inside Text, Heading, or Button labels.

Best Practice Summary

Start with layout: direction, distribution, and gap.
Set spacing early: consistent padding makes responsive scaling predictable.
Style at the container level: use background / border / shadow to visually group sections.
Define actions clearly: combine Select Product + Selected State for interactive paywalls.
Preview across devices: ensure responsive alignment under Safe Area (20 px h, 59 px top, 34 px bottom).