SVG Shapes

Installation

pnpm
npmyarnbun
Copy
pnpm dlx shadcn@latest add https://cult-ui.com/r/svg-shapes.json

Usage

Import only the shapes you need. Each export is a React component that renders an <svg> with a shared wide viewBox (typically 2400×800–1200).

Copy
import {
  TriangleShapeSvg,
  GothicArchPanelSvg,
  FlowerOfLifeSvg,
} from "@/components/ui/svg-shapes"
 
export function HeroStrip() {
  return (
    <div className="text-foreground/20 w-full max-w-4xl">
      <GothicArchPanelSvg />
    </div>
  )
}

Props

Stroke and fill use currentColor (and tinted fills on filled shapes) so you control appearance with Tailwind classes on a wrapper.

Notes

• Line-art exports (e.g. bracket, wire solids) use fill-none so only strokes show.
• For localized fixed or transform behavior, wrap in a container with transform-gpu / isolate like other full-bleed effects.