Step Indicator

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

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

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

<Shapes21 />

More Shapes pieces

View all Shapes

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

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

Tree Diagram

shapes13

A filled parent node branches into two outlined children.

Tab Bar

shapes25

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

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

Breadcrumb

shapes28

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