Section Divider
Game One slanted divider for major section transitions.
Hero section above
Content section below
Hero section above
Content section below
Hero section with extra bottom padding
Content section — stripe overlaps the hero above
Installation
npx shadcn@latest add @gameone/section-dividerRegistry dependencies: gameone-utils
The jersey texture SVG is not included automatically. Download jersey_pattern.svg and place it in your public/ folder to use the jerseyPatternSrc prop. Download jersey_pattern.svg
Usage
import { SectionDivider } from "@/components/ui/section-divider"<SectionDivider lean="right" />
{/* Overlap the previous section */}
<SectionDivider lean="right" overlap />
{/* With jersey pattern texture */}
<SectionDivider lean="right" jerseyPatternSrc="/jersey_pattern.svg" />Examples
Lean Right
Stripe tilts down toward the right.
Hero section above
Content section below
Lean Left
Stripe tilts down toward the left.
Hero section above
Content section below
Overlap
Pulls the stripe up over the previous section with negative margin.
Hero section with extra bottom padding
Content section — stripe overlaps the hero above
Jersey Pattern (Right)
Jersey texture fills the wedge below the stripe.
Hero section above
Content section below (jersey texture in wedge)
Jersey Pattern (Left)
Jersey texture with left lean.
Hero section above
Content section below (jersey texture in wedge)