Controls
-35
0.3
18
2
6
Backgrounds
DiagonalLines
A configurable diagonal stripe background for punchy poster and pop-art compositions.
Component
38
Import
import { DiagonalLines } from "@swirski/ui";Playground
Usage
<div className="relative h-72 overflow-hidden border-4 border-black bg-[#FFD400]">
<DiagonalLines
className="inset-0"
angle={-35}
color="#0B0B0C"
opacity={0.3}
spacing={18}
thickness={2}
accentColor="#FF3131"
accentEvery={6}
accentThickness={8}
/>
</div>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
accentColor | string | - | Optional color for heavier accent stripes. |
accentEvery | number | - | Adds accent stripes every N repeats when greater than 1. |
accentThickness | string | number | 5 | Thickness for accent stripes. |
angle | string | number | -45 | Line angle in degrees or any CSS angle value. |
color | string | "#0B0B0C" | Primary stripe color. |
opacity | CSSProperties['Opacity'] | 0.2 | Opacity applied to the stripe layer. |
size | 'sm' | 'md' | 'lg' | "md" | Generated from DiagonalLinesProps. |
spacing | string | number | 18 | Distance before the pattern repeats. |
thickness | string | number | 2 | Primary stripe thickness. |
tone | 'default' | "default" | Generated from DiagonalLinesProps. |
variant | 'default' | 'accent' | "default" | Generated from DiagonalLinesProps. |
...divProps | Omit<HTMLAttributes<HTMLDivElement>, "color"> | - | Forwarded to the root div. |