> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Components library

> Choose the right Flowboard component for each screen and learn how to set it up in the visual editor.

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

<CardGroup cols={2}>
  <Card title="Build a full screen layout" icon="layout-frame">
    Start with [Stack](/components/stack), then add [Spacer](/components/spacer) or [Slider](/components/slider) when you need more structure.
  </Card>

  <Card title="Add content" icon="pen-to-square">
    Use [Text](/components/text), [Rich Text](/components/rich-text), [Icon](/components/icon), [Image](/components/image), and [Lottie](/components/lottie).
  </Card>

  <Card title="Capture input" icon="square-poll-horizontal">
    Choose [Text Input](/components/text-input), [Selection List](/components/selection-list), or [Wheel Picker](/components/wheel-picker).
  </Card>

  <Card title="Drive action" icon="cursor-click">
    Use [Button](/components/button) for your main call to action.
  </Card>

  <Card title="Show progress or status" icon="loader">
    Pair [Loader](/components/loader) with [Page Indicator](/components/page-indicator) when users need orientation.
  </Card>

  <Card title="Compare or explain data" icon="chart-radar">
    Use [Radar Chart](/components/radar-chart) when visual comparison matters more than exact numbers.
  </Card>
</CardGroup>

## Component categories

### Layout

* [Stack](/components/stack): Build the main structure of a screen.
* [Positioned](/components/positioned): Place one item precisely inside a stack.
* [Spacer](/components/spacer): Add intentional empty space.
* [Slider](/components/slider): Turn multiple pages into a swipeable sequence.

### Content

* [Text](/components/text): Add a single-style headline, paragraph, or label.
* [Rich Text](/components/rich-text): Highlight part of a sentence or combine styles in one block.
* [Icon](/components/icon): Add compact visual cues and status markers.

### Media

* [Image](/components/image): Show static visuals, screenshots, or logos.
* [Lottie](/components/lottie): Add lightweight motion to explain or celebrate.

### Actions

* [Button](/components/button): Give the user a clear next step.

### Inputs

* [Text Input](/components/text-input): Capture typed answers.
* [Selection List](/components/selection-list): Let users choose from visible options.
* [Wheel Picker](/components/wheel-picker): Let users scroll to a single choice.

### Feedback

* [Loader](/components/loader): Show wait states or simulated progress.
* [Page Indicator](/components/page-indicator): Show where the user is in a slider.

### Data

* [Radar Chart](/components/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](/components/stack) for layout
2. [Text](/components/text) for the main message
3. [Image](/components/image) or [Lottie](/components/lottie) for visual support
4. [Button](/components/button) for the next step
5. [Page Indicator](/components/page-indicator) if the flow spans multiple pages

<Tip>
  When a screen feels too busy, remove one visual element before you add another. Clear structure usually improves completion more than extra decoration.
</Tip>