Step Indicator

About this piece

Step Indicator

Four nodes connected by lines, two complete, the third active, the last pending.

Usage

The import and the props worth knowing about, in one place.

import { Shapes21 } from "@/components/beste/piece/shapes21";

<Shapes21 />

More Shapes pieces

View all Shapes

Multi-step Form

Three-node progress strip above a card with two fields and back-next actions.

Workflow Boxes

Three squares connected by arrows, stepping from outline to fill.

Tab Bar

Three tab labels above a divider, with a foreground indicator under the active one.

Tree Diagram

A filled parent node branches into two outlined children.

Breadcrumb

Three crumb segments separated by chevrons, the last one in foreground tone.

Geometric Trio

Triangle, circle, and square primitives lined up in three tones.