> ## 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.

# Page Indicator

> Use Page Indicator to show progress and orientation in a multi-page slider.

## What it is

**Page Indicator** shows where the user is inside a multi-page slider.

## What it's best for

Use it when users should understand how many pages exist and where they are in the sequence.

## When to use it

* Multi-step onboarding
* Swipeable product tours
* Testimonial carousels
* Story-style pricing or feature sequences

## When not to use it

* Do not use it without a [Slider](/components/slider).
* Do not rely on it as the only form of guidance if the flow is complex. Pair it with clear copy and layout.

## How to add it in the dashboard

1. Open the screen that contains the slider.
2. Add **Page Indicator** from the **Components panel**.
3. Select it on the **canvas**.
4. In the **properties panel**, link it to the slider and adjust size, spacing, color, and alignment.
5. Review the full screen to make sure progress feels visible but not distracting.

## Key parameters

| Parameter      | What it changes                              | When to adjust it                                   |
| -------------- | -------------------------------------------- | --------------------------------------------------- |
| Linked slider  | Connects the indicator to the correct slider | Set it whenever the screen has more than one slider |
| Dot size       | Changes how large each progress dot appears  | Increase it when the indicator needs more presence  |
| Spacing        | Controls the gap between dots                | Use it to keep the indicator balanced and legible   |
| Active color   | Highlights the current page                  | Choose a clear, noticeable color                    |
| Inactive color | Styles the non-current pages                 | Keep it quieter than the active state               |
| Alignment      | Places the indicator left, center, or right  | Match it to the screen layout and CTA placement     |

## Example use cases

* Show three-step progress during a product onboarding carousel
* Reinforce that a feature tour has more pages to explore
* Add orientation to a swipeable paywall story

## Best practices

* Keep the active state easy to spot at a glance.
* Place the indicator where it supports the reading flow.
* Use it whenever multiple pages are part of one connected story.

## Common mistakes

* Forgetting to connect it to the right slider
* Making the dots so small that progress is hard to read
* Hiding it in a visually busy area of the screen

## Related components

* [Slider](/components/slider)
* [Button](/components/button)
* [Text](/components/text)
* [Stack](/components/stack)