Pattern
CSS-only background pattern overlay with seven variants. No SVGs needed.
Preview
Import
import { Pattern } from "@sigil-ui/components";Usage
<div className="relative h-64">
<Pattern />
</div>Variants
<Pattern variant="dots" />
<Pattern variant="hatch" />
<Pattern variant="diagonal" />
<Pattern variant="diamond" />
<Pattern variant="hexagon" />
<Pattern variant="triangle" />
<Pattern variant="crosshatch" />Opacity and scale
<Pattern variant="dots" opacity={0.2} scale={1.5} />As a section background
<section className="relative py-20">
<Pattern variant="crosshatch" opacity={0.05} className="absolute inset-0" />
<div className="relative z-10">Section content</div>
</section>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dots" | "hatch" | "diagonal" | "diamond" | "hexagon" | "triangle" | "crosshatch" | "dots" | Pattern type |
opacity | number | 0.1 | Pattern opacity |
scale | number | 1 | Pattern scale multiplier |
className | string | — | Additional CSS classes |