Dot Grid

Sixteen dots laid out as a four-by-four spacing grid.

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

Import & use
import { Shapes7 } from "@/components/beste/piece/shapes7";

<Shapes7 />

More Shapes pieces

View all Shapes

Feature Grid

shapes31

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

Five carousel dots with the active one stretched into a pill.

Five dots scattered above a two-line coordinate axis.

Bento Grid

shapes49

Asymmetric bento layout with one large tile, two stacked small ones, and a wide row.

Four bordered tiles each with a digit value above a small unit label.

Heatmap Grid

shapes22

Seven-by-five activity grid shading from muted to deep emerald.