---
title: "StepList — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Sadman Alam · Text. This StepList component helps you present processes, tutorials, or instructions in a clear vertical flow with numbered circular markers."
canonical: "https://framer.elliotli.dev/component/steplist"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/StepList

# StepList

[View on Framer](https://framer.com/marketplace/components/steplist/?via=elliot-li)

![StepList preview image 1](https://framer.elliotli.dev/og/component/steplist/8d73c7df427bf818/1600x1200.jpg)

## Summary

This StepList component helps you present processes, tutorials, or instructions in a clear vertical flow with numbered circular markers.

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-zrfa5zen-TQqK0fQNImbC8NcGAx0JzbdIcSWX24)

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10164

## Details

- **Author**: Sadman Alam
- **Price**: $8.00
- **Published**: 2026-01-09
- **Updated**: 2026-01-09
- **Added**: 2026-01-09
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos