Styling Components
Customize the visual appearance of every component.
Styling Components
Every component in Setgreet supports a comprehensive set of styling properties. You configure these in the properties panel when a component is selected in the flow builder. Styles are applied per-component, giving you precise control over the visual appearance of every element.
Colors
Color properties accept hex values (e.g., #FF5733) or rgba values (e.g., rgba(255, 87, 51, 0.8)) for transparency control.
| Property | Available on | Description |
|---|---|---|
| Background Color | Most components | Fill color behind the component content. |
| Text Color | Text, Button, Badge, inputs | Color of text content. |
| Border Color | Most components | Stroke color of the component border. |
| Active Color | Rating, NPS, Progress | Color for the active/selected state. |
| Inactive Color | Rating, NPS, Progress | Color for the inactive/unselected state. |
Opacity
All components support an opacity property (0 to 1) that controls overall transparency. An opacity of 0 makes the component fully transparent, while 1 is fully opaque. This is independent of any alpha channel in color values.
Typography
Text styling properties are available on any component that displays text — Text, Button, Badge, input labels, and more.
| Property | Type | Description |
|---|---|---|
| Font Family | font picker | Select from available typefaces. Default: Inter. The font picker includes common web and system fonts. |
| Font Size | number | Size in points. Range: 8-128. |
| Font Weight | select | Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black. |
| Line Height | number | Multiplier that controls vertical spacing between lines. |
| Letter Spacing | number | Additional horizontal spacing between characters in pixels. |
| Text Alignment | select | Left, center, or right alignment of text within its container. |
| Text Decoration | select | None, underline, strikethrough. |
| Text Transform | select | None, uppercase, lowercase, capitalize. |
Fonts are rendered using the native platform type system. If a specified font is not available on a device, the platform falls back to the default system font.
Borders
Border properties create visual outlines around components.
| Property | Type | Description |
|---|---|---|
| Border Width | number | Stroke width in pixels. Set to 0 for no border. |
| Border Color | color | Stroke color (hex or rgba). |
| Border Radius | number | Corner rounding in pixels. A high value creates pill or circle shapes. |
Border radius can be set uniformly (all four corners) or per-corner on some components (e.g., bottom sheet top corners). The container and card components support individual corner radius values for asymmetric rounding.
Spacing
Spacing properties control the internal and external whitespace around a component. Setgreet uses a four-sided spacing model.
Padding
Internal spacing between the component boundary and its content. Defined as four values: top, right, bottom, left.
Example: a button with padding: { top: 12, right: 24, bottom: 12, left: 24 } has more horizontal breathing room than vertical.
Margin
External spacing between the component boundary and its siblings. Also defined as four values: top, right, bottom, left.
Margins create separation between adjacent components in the layout flow. Use margin instead of padding when you want space outside the component's visible boundary.
Shadows
Shadow properties add depth to components by rendering a drop shadow beneath them. Shadows are available on Card, Container, Button, and other visual components.
| Property | Type | Description |
|---|---|---|
| Offset X | number | Horizontal shadow displacement in pixels. |
| Offset Y | number | Vertical shadow displacement in pixels. |
| Blur Radius | number | How much the shadow is blurred. Higher values create softer shadows. |
| Spread | number | How far the shadow extends beyond the component boundary. |
| Color | color | Shadow color (typically a semi-transparent black like rgba(0,0,0,0.15)). |
Shadows are rendered natively on both platforms and respect the component's border radius for accurate shadow shapes.
Visibility
Components can be conditionally shown or hidden based on user data.
Static visibility
The visible property (boolean) controls whether a component is rendered at all. Set it to false to hide a component without removing it from the screen definition. Hidden components do not take up layout space.
Conditional visibility
Components support visibility conditions that evaluate at runtime based on user attributes or event properties. A component with conditions is only rendered when its conditions are met.
| Condition field | Description |
|---|---|
| Source | userAttribute or eventProperty |
| Field | The attribute or property key to evaluate (e.g., plan, country). |
| Operator | equals, notEquals, contains, greaterThan, lessThan, exists, notExists. |
| Value | The comparison value. |
Multiple conditions can be combined to create precise targeting rules for individual components within a screen.
Use cases
- Show a "Pro" badge only to users on the Pro plan
- Display a discount banner only for users in a specific country
- Hide an advanced feature explanation for new users