Workflow Boxes

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

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

Import & use
import { Shapes5 } from "@/components/beste/piece/shapes5";

<Shapes5 />

More Shapes pieces

View all Shapes

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

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

Three divided rows with labels and trailing toggles or value lines.

Feature Grid

shapes31

Three columns, each with an icon tile, a heading line, and two body lines.

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

Tree Diagram

shapes13

A filled parent node branches into two outlined children.