Stepwise UI

Diagonal Lines

Diagonal hairlines for section backgrounds, leaning left or right. Absolutely positioned to fill its nearest positioned ancestor - give the parent relative and a height.

Installation

npx stepwise-ui add diagonal-lines

Default

Leans right.
import { DiagonalLines } from '@/components/stepwise/diagonal-lines'

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

Left

Pass variant="left" to lean the other way.
<div className="relative h-64">
  <DiagonalLines variant="left" />
</div>

Props

PropTypeDescription
variant
'left' | 'right'
Direction of lean. Default 'right'.
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.