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