Game One

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-divider

Registry 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
import { SectionDivider } from "@/components/ui/section-divider"
Example
<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
import { SectionDivider } from "@/components/ui/section-divider"

export function SectionDividerRight() {
  return <SectionDivider lean="right" />
}

Lean Left

Stripe tilts down toward the left.

Hero section above
Content section below
import { SectionDivider } from "@/components/ui/section-divider"

export function SectionDividerLeft() {
  return <SectionDivider lean="left" />
}

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
import { SectionDivider } from "@/components/ui/section-divider"

export function SectionDividerOverlap() {
  return <SectionDivider lean="right" overlap />
}

Jersey Pattern (Right)

Jersey texture fills the wedge below the stripe.

Hero section above
Content section below (jersey texture in wedge)
import { SectionDivider } from "@/components/ui/section-divider"

export function SectionDividerJerseyRight() {
  return <SectionDivider lean="right" jerseyPatternSrc="/jersey_pattern.svg" />
}

Jersey Pattern (Left)

Jersey texture with left lean.

Hero section above
Content section below (jersey texture in wedge)
import { SectionDivider } from "@/components/ui/section-divider"

export function SectionDividerJerseyLeft() {
  return <SectionDivider lean="left" jerseyPatternSrc="/jersey_pattern.svg" />
}
Countdown TimerStat Card