Components
Reference for every native component available for building native flows.
Components
Setgreet provides a full library of native UI components for building in-app experiences. Components are rendered natively on iOS and Android, so what you configure in the dashboard is what your users see on their devices. The one exception is the WebView component, which exists specifically to embed external web content.
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, MultiSelect, Checkbox, Switch, Segmented Control, Chip, RadioGroup, Quiz, Slider, Stepper, DatePicker | Collect user responses |
| Feedback | Rating, NPS, Emoji Feedback, Thumbs | Gather user sentiment |
| Social Proof | Testimonial, User Avatars, Purchase Count, Review Carousel | Build trust and credibility |
| Display | Badge, Tooltip, WebView, Card, Divider, Spacer, Modal Trigger | Supporting visual elements |
| Metrics | Countdown Timer, Progress Indicator | Track progress and create urgency |
| Layout | Container, Stack, Accordion, 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 entrance animations, looping motion, and press feedback, and screens can animate in with a transition. All of it renders natively and respects the user's reduce motion setting.