BG Patterns

Soft, minimal, customizable background patterns. Use as absolute overlays or inline background elements. All patterns accept color, opacity, and size props.

Import

import {
  PatternDots,
  PatternGrid,
  PatternLines,
  PatternDiagonal,
  PatternCross,
  PatternCheckerboard,
  PatternDiamond,
  PatternZigzag,
  PatternDashedGrid,
  PatternRadial,
} from "poyraz-ui/atoms";

All Patterns

10 pattern variants — each rendered as an overlay on a container. Customize color, opacity, and size.

Dots

Grid

Lines

Diagonal

Cross

Checkerboard

Diamond

Zigzag

Dashed Grid

Radial

{/* Overlay usage */}
<div className="relative h-48 overflow-hidden">
  <PatternDots overlay size={24} opacity={0.1} color="#334155" className="w-full h-full" />
  <div className="relative z-10">Your content</div>
</div>

{/* Props — shared across all patterns */}
// color: string    — any CSS color (default: "currentColor")
// opacity: number  — 0-1 (default varies per pattern)
// size: number     — spacing in px (default varies per pattern)
// overlay: boolean — position absolute inset-0

Custom Colors

Patterns work with any CSS color — match your brand or theme.

Red Dots

Blue Grid

Green Diagonal

<PatternDots overlay size={20} opacity={0.15} color="#dc2626" className="w-full h-full" />
<PatternGrid overlay size={32} opacity={0.1} color="#2563eb" className="w-full h-full" />
<PatternDiagonal overlay size={12} opacity={0.12} color="#16a34a" className="w-full h-full" />

Usage Example

Overlay a pattern on a hero section.

Hero Title

Content above the pattern

<section className="relative py-20 overflow-hidden">
  <PatternDots
    overlay
    size={28}
    opacity={0.12}
    color="#334155"
    className="w-full h-full"
  />
  <div className="relative z-10 text-center">
    <h1>Your Hero Title</h1>
    <p>Content sits above the pattern.</p>
  </div>
</section>