A flexible vertical timeline component with connected step points, gradient lines, and fully customizable labels, spacing, colors, and alignment.
Make it with Workshop
Build your own component with AI
Step Point is a vertical timeline and step indicator component for Framer. It displays a list of steps with dots connected by a vertical gradient line, making it easy to show progress, sequences, or timelines.
You can add, remove, and edit steps directly from the property panel. The component lets you customize dot size and color, gradient line colors and width, text styling, spacing between steps, and dot alignment (top, center, or bottom).
It’s fully responsive, resizes freely, and text wraps naturally on smaller widths. Ideal for roadmaps, process flows, timelines, and step-by-step sections.