Layered Stack

Three rounded squares fanned diagonally in foreground, amber, and card tones.

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

Import & use
import { Shapes1 } from "@/components/beste/piece/shapes1";

<Shapes1 />

More Shapes pieces

View all Shapes

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

Avatar Stack

shapes12

Three overlapping circles separated by card-colored rings.

Breadcrumb

shapes28

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

Avatar circle, two stacked content lines, and a rose unread dot.

Three plan columns side by side with the middle one ringed in foreground for emphasis.

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