Stepwise UI

Zigzag Lines

A zig-zag line pattern for section backgrounds. Absolutely positioned to fill its nearest positioned ancestor - give the parent relative and a height.

Installation

npx stepwise-ui add zigzag-lines

Default

Waves horizontally.
import { ZigzagLines } from '@/components/stepwise/zigzag-lines'

<div className="relative h-64">
  <ZigzagLines />
</div>

Vertical

Pass variant="vertical" to wave the other way.
<div className="relative h-64">
  <ZigzagLines variant="vertical" />
</div>

Props

PropTypeDescription
variant
'horizontal' | 'vertical'
Wave direction. Default 'horizontal'.
size
number
Pattern tile size in px. Default 24.
faded
boolean
Fade the pattern out toward the edges. Default true.
className
string
Merged onto the root.