Step IndicatorGuide people through any process.

Numbered steps in horizontal or vertical layout with connectors and active/complete states. For how-it-works sections and onboarding flows.

What it does

Numbered steps with progress states

The Step Indicator shows a sequence of numbered steps connected by lines. Each step has a title, body text, and a status — pending, active, or complete. Click any step to activate it, or set the active step in the widget settings.

Best used for: how-it-works sections, setup guides, onboarding checklists, multi-phase project timelines, and any numbered process where seeing the full sequence matters.

Live example

Getting started with PF Create

Get your access key

Connect your AI

Open your AI client and add the PF Create MCP server using your access key.

Add an API key

Add your Gemini API key in Services to unlock image generation.

Run your first task

Ask your AI to generate an image, write a post, or search your memory.

Key settings

What you can control

Setting	What it does
Layout	Horizontal (left to right) or vertical (top to bottom).
Step status	Each step is pending, active, or complete — with distinct colours for each state.
Interactive	When enabled, visitors can click any step to activate it.
Connector style	Solid line, dashed line, or dots between steps.
State colours	Separate colours for pending, active, and complete states.

← Feature Comparison Next: Onboarding Stepper →