Components
Reference for every native component available for building in-app experiences.
Components
Setgreet provides a full library of native UI components for building in-app experiences. Every component is rendered natively on iOS and Android — no webviews, no performance compromises. What you configure in the dashboard is exactly what your users see on their devices.
Component categories
Components are organized into categories based on their purpose:
| Category | Components | Purpose |
|---|---|---|
| Text & Buttons | Text, Button | Core content and interaction elements |
| Media | Image, Video, Lottie, Carousel | Visual and animated content |
| Input | TextInput, Dropdown, Checkbox, RadioGroup, MultiSelect, Slider, DatePicker | Collect user responses |
| Feedback | Rating, NPS, Emoji Feedback, Thumbs | Gather user sentiment |
| Display | Badge, Tooltip, WebView, Card, Divider, Spacer | Supporting visual elements |
| Metrics | Countdown Timer, Progress Bar, Progress Indicator | Track progress and create urgency |
| Layout | Container, Stack, Presentation Styles | Structure and present screens |
How components work
Every flow in Setgreet is made up of screens, and every screen is made up of components. You build screens by adding components from the component toolbox and configuring their properties in the properties panel.
Adding components
Select a component from the toolbox on the left side of the flow builder. The component is added to the currently selected screen. Drag components to reorder them within the screen, or nest them inside container components to create complex layouts.
Configuring properties
Each component has a set of configurable properties organized into sections:
- Content — the data the component displays (text, image URL, options list)
- Layout — width, height, padding, margin
- Appearance — colors, fonts, borders, shadows, border radius
Properties are edited in the right-side panel when a component is selected.
Flexbox layout system
Setgreet uses a flexbox layout model for all component positioning. Components flow vertically by default within a screen, and you control their arrangement using standard flexbox properties on container components:
- Direction — row or column
- Alignment — how children align on the cross axis (start, center, end, stretch)
- Justify — how children distribute on the main axis (start, center, end, space-between, space-around)
- Gap — spacing between child components
- Padding — internal spacing within the container
This approach ensures layouts adapt naturally to different screen sizes without manual positioning.
Setgreet does not use absolute positioning for component layout. All components are arranged using flexbox, which guarantees consistent rendering across device sizes and orientations.
Native rendering
Components are rendered using native platform UI elements — SwiftUI on iOS and Jetpack Compose on Android. This means:
- Smooth 60fps animations and transitions
- Consistent behavior with the rest of your app
- No web rendering overhead
- Full support for platform accessibility features
Variable bindings
Most component properties support variable bindings, letting you display dynamic content based on user attributes or event data. For example, a text component can greet users by name using {{user.firstName}}.
Animations
Components can be configured with enter, exit, hover, tap, and loop animations to create engaging, polished experiences.