Controls
0.34
18
2
4
Backgrounds
LineGrid
A configurable line grid background with optional heavier accent lines for pop-art surfaces.
Component
37
Import
import { LineGrid } from "@swirski/ui";Playground
Usage
<div className="relative h-72 overflow-hidden border-4 border-black bg-[#FFD400]">
<LineGrid
className="inset-0"
color="#0B0B0C"
opacity={0.34}
spacing={18}
thickness={2}
direction="both"
accentColor="#FF3131"
accentEvery={4}
accentThickness={5}
/>
</div>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
accentColor | string | - | Optional color for heavier accent lines. |
accentEvery | number | - | Adds accent lines every N cells when greater than 1. |
accentThickness | string | number | 3 | Thickness for accent lines. |
color | string | "#0B0B0C" | Fallback color for horizontal and vertical lines. |
direction | 'both' | 'horizontal' | 'vertical' | "both" | Which line directions to render. |
horizontalColor | string | - | Overrides the horizontal line color. |
horizontalSpacing | string | number | - | Generated from LineGridProps. |
horizontalThickness | string | number | - | Generated from LineGridProps. |
opacity | CSSProperties['Opacity'] | 0.2 | Opacity applied to the grid layer. |
size | 'sm' | 'md' | 'lg' | "md" | Generated from LineGridProps. |
spacing | string | number | 18 | Fallback spacing for both directions. |
thickness | string | number | 1 | Fallback line thickness for both directions. |
tone | 'default' | "default" | Generated from LineGridProps. |
variant | 'default' | 'accent' | "default" | Generated from LineGridProps. |
verticalColor | string | - | Overrides the vertical line color. |
verticalSpacing | string | number | - | Generated from LineGridProps. |
verticalThickness | string | number | - | Generated from LineGridProps. |
...divProps | Omit<HTMLAttributes<HTMLDivElement>, "color"> | - | Forwarded to the root div. |