Skip to main content
This library explains every component currently available in the Flowboard visual editor. It is written for teams working in the dashboard, with guidance on when to use each component, how to configure it in the properties panel, and which patterns work best in SaaS onboarding flows.

​
What you’ll find here

Use this section when you need to answer practical questions such as:
  • Which component should you use for a hero layout?
  • When should you use a Selection List instead of a Wheel Picker?
  • Which settings matter most before you publish a screen?
  • How can you keep a screen clear, focused, and easy to complete?
Every component page includes:
  • A simple explanation of what the component does
  • Guidance on when to use it and when to avoid it
  • Visual-editor setup steps in the dashboard
  • A table of the key parameters you will adjust most often
  • SaaS-oriented use cases and best practices

​
Choose by job to be done

Build a full screen layout

Start with Stack, then add Spacer or Slider when you need more structure.

Add content

Use Text, Rich Text, Icon, Image, and Lottie.

Capture input

Choose Text Input, Selection List, or Wheel Picker.

Drive action

Use Button for your main call to action.

Show progress or status

Pair Loader with Page Indicator when users need orientation.

Compare or explain data

Use Radar Chart when visual comparison matters more than exact numbers.

​
Component categories

​
Layout

  • Stack: Build the main structure of a screen.
  • Positioned: Place one item precisely inside a stack.
  • Spacer: Add intentional empty space.
  • Slider: Turn multiple pages into a swipeable sequence.

​
Content

  • Text: Add a single-style headline, paragraph, or label.
  • Rich Text: Highlight part of a sentence or combine styles in one block.
  • Icon: Add compact visual cues and status markers.

​
Media

  • Image: Show static visuals, screenshots, or logos.
  • Lottie: Add lightweight motion to explain or celebrate.

​
Actions

  • Button: Give the user a clear next step.

​
Inputs

​
Feedback

  • Loader: Show wait states or simulated progress.
  • Page Indicator: Show where the user is in a slider.

​
Data

  • Radar Chart: Compare strengths, scores, or profiles across several dimensions.

​
How to work faster in the editor

  • Start with the user goal, then choose the simplest component that communicates it well.
  • Use the Components panel to add only what the screen needs. A focused screen usually performs better than a crowded one.
  • Use the properties panel to make hierarchy obvious. Headline size, spacing, and button treatment matter more than adding extra decoration.
  • Keep one clear primary action on the screen. If you need a secondary action, make it visually quieter.
  • Pair interactive components with short, direct instructions so the user knows what to do next.

​
Start with these components

If you are building your first Flowboard screen, start here:
  1. Stack for layout
  2. Text for the main message
  3. Image or Lottie for visual support
  4. Button for the next step
  5. Page Indicator if the flow spans multiple pages
When a screen feels too busy, remove one visual element before you add another. Clear structure usually improves completion more than extra decoration.