SVG Bands

Installation

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

Usage

Use preset components for common silhouettes, or BandShape with your own closed path and viewBox. Several exports expose path builder functions (castleWallBandPath, zigzagSawtoothBandPath) if you need different merlon or tooth counts without duplicating geometry.

Copy
import {
  TopBandSteepRightSvg,
  BandShape,
  castleWallBandPath,
} from "@/components/ui/svg-bands"
 
export function SectionDivider() {
  return (
    <div className="text-foreground/30 w-full">
      <TopBandSteepRightSvg />
    </div>
  )
}
 
export function CustomBattlement() {
  return (
    <BandShape
      viewBox="0 0 2400 180"
      path={castleWallBandPath(8)}
      title="Eight-tooth battlement"
    />
  )
}

BandShape props

Preset components are mostly className only; ZigzagSawtoothBandSvg accepts optional teeth (default 12, must be ≥ 2).

Path helpers

Notes

• Ornamental exports (DualSideNotchFrameSvg, WavyBottomEdgeSvg, CenterTabTopBandSvg) bundle responsive Tailwind classes for small breakpoints; override with className if needed.
• BottomBandSteepRightSvg already applies a vertical flip so the steep geometry reads as a footer trim.