StepList

This StepList component helps you present processes, tutorials, or instructions in a clear vertical flow with numbered circular markers. Each step is visually connected, making it easy for users to follow progress at a glance while maintaining a structured and readable content.

The component automatically adjusts connector lines based on content height, ensuring perfect alignment even when step text varies. You can easily add, remove, or reorder steps directly from the Framer property panel, making it flexible for fast iteration and real-world content changes.

Every visual detail is fully customizable - colors, fonts, circle size, spacing, alignment, and line styles - so it blends seamlessly with any design system. Responsive by default, it’s ideal for onboarding flows, feature breakdowns, timelines, or step-by-step guides.