A library of wide-viewBox line-art SVG shape components (polygons, architectural panels, sacred-geometry diagrams, and Platonic-solid wireframes) for hero sections and landing-page background decoration.
"use client";
import type { ReactNode } from "react";
import {
ArrowPentagonShapeSvg,
CircleShapeSvg,
CubeWireshapeSvg,
DodecahedronWireshapeSvg,
EllipseShapeSvg,
FlowerOfLifeSvg,
GoldenSpiralSvg,
GothicArchPanelSvg,
IcosahedronWireshapeSvg,
KiteShapeSvg,
MetatronsCubeSvg,
OctahedronWireshapeSvg,
PennantShapeSvg,
QuarterCircleShapeSvg,
RightTriangleShapeSvg,
RoundedSquareShapeSvg,
RoundedTriangleShapeSvg,
SeedOfLifeSvg,
SemicircleShapeSvg,
SingleBracketShapeSvg,
SquircleShapeSvg,
SriYantraSvg,
TetrahedronWireshapeSvg,
TorusTubeSvg,
TriangleShapeSvg,
VesicaPiscisSvg,
} from "@/components/ui/svg-shapes";
function DemoSection({
title,
children,
}: {
title: string;
children: ReactNode;
}) {
return (
<section className="w-full space-y-4">
<h3 className="text-foreground text-sm font-semibold tracking-tight">
{title}
</h3>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
{children}
</div>
</section>
);
}
function ShapeTile({
label,
tall,
children,
}: {
label: string;
tall?: boolean;
children: ReactNode;
}) {
return (
<div className="bg-muted/30 flex flex-col gap-2 rounded-lg border p-3">
<p className="text-muted-foreground text-xs font-medium">{label}</p>
<div
className={`flex items-center justify-center [&_svg]:w-full ${
tall ? "min-h-28 [&_svg]:max-h-28" : "min-h-20 [&_svg]:max-h-20"
}`}
>
{children}
</div>
</div>
);
}
export default function SvgShapesDemo() {
return (
<div className="dark:bg-stone-950 flex flex-col items-center gap-12 rounded-md px-4 py-6 md:px-0">
<div className="max-w-2xl space-y-2 text-center">
<h2 className="text-foreground text-2xl font-bold tracking-tight">
SVG shapes
</h2>
<p className="text-muted-foreground text-sm">
Wide viewBox line-art panels for landing pages: polygons,
architectural silhouettes, sacred geometry, and Platonic wire
projections. Shape via{" "}
<code className="bg-muted rounded px-1 py-0.5 text-xs">
currentColor
</code>{" "}
and light fill tints; pass{" "}
<code className="bg-muted rounded px-1 py-0.5 text-xs">flip</code> to
mirror without editing paths.
</p>
</div>
<div className="flex w-full max-w-5xl flex-col gap-10">
<DemoSection title="Polygons & curves">
<ShapeTile label="Triangle">
<TriangleShapeSvg />
</ShapeTile>
<ShapeTile label="Circle">
<CircleShapeSvg />
</ShapeTile>
<ShapeTile label="Ellipse">
<EllipseShapeSvg />
</ShapeTile>
<ShapeTile label="Semicircle (D panel)">
<SemicircleShapeSvg />
</ShapeTile>
<ShapeTile label="Right triangle">
<RightTriangleShapeSvg />
</ShapeTile>
<ShapeTile label="Kite">
<KiteShapeSvg />
</ShapeTile>
<ShapeTile label="Pennant">
<PennantShapeSvg />
</ShapeTile>
<ShapeTile label="Quarter circle">
<QuarterCircleShapeSvg />
</ShapeTile>
</DemoSection>
<DemoSection title="Rounded & architectural">
<ShapeTile label="Rounded square">
<RoundedSquareShapeSvg />
</ShapeTile>
<ShapeTile label="Rounded triangle">
<RoundedTriangleShapeSvg />
</ShapeTile>
<ShapeTile label="Squircle">
<SquircleShapeSvg />
</ShapeTile>
<ShapeTile label="Gothic arch panel">
<GothicArchPanelSvg />
</ShapeTile>
<ShapeTile label="Bracket (line art)">
<SingleBracketShapeSvg />
</ShapeTile>
<ShapeTile label="Arrow pentagon">
<ArrowPentagonShapeSvg />
</ShapeTile>
</DemoSection>
<DemoSection title="Sacred geometry">
<ShapeTile label="Vesica piscis" tall>
<VesicaPiscisSvg />
</ShapeTile>
<ShapeTile label="Seed of life" tall>
<SeedOfLifeSvg />
</ShapeTile>
<ShapeTile label="Flower of life" tall>
<FlowerOfLifeSvg />
</ShapeTile>
<ShapeTile label="Metatron’s cube" tall>
<MetatronsCubeSvg />
</ShapeTile>
<ShapeTile label="Sri Yantra" tall>
<SriYantraSvg />
</ShapeTile>
<ShapeTile label="Golden spiral" tall>
<GoldenSpiralSvg />
</ShapeTile>
<ShapeTile label="Torus tube" tall>
<TorusTubeSvg />
</ShapeTile>
</DemoSection>
<DemoSection title="Platonic solids (wire projections)">
<ShapeTile label="Tetrahedron">
<TetrahedronWireshapeSvg />
</ShapeTile>
<ShapeTile label="Cube">
<CubeWireshapeSvg />
</ShapeTile>
<ShapeTile label="Octahedron">
<OctahedronWireshapeSvg />
</ShapeTile>
<ShapeTile label="Icosahedron">
<IcosahedronWireshapeSvg />
</ShapeTile>
<ShapeTile label="Dodecahedron">
<DodecahedronWireshapeSvg />
</ShapeTile>
</DemoSection>
<section className="w-full space-y-4">
<h3 className="text-foreground text-sm font-semibold tracking-tight">
Flip prop
</h3>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
{(
[
["none", "none"],
["vertical", "vertical"],
["horizontal", "horizontal"],
["both axes", "both"],
] as const
).map(([label, flip]) => (
<ShapeTile key={flip} label={label}>
<PennantShapeSvg flip={flip} />
</ShapeTile>
))}
</div>
</section>
</div>
</div>
);
}
Part of cult ui — browse the full library on 21st.dev.