Brickslab.

@brickslab/ui-web

Static SVG grid lines with solid or dashed variants and optional radial mask

Grid

Props

PropTypeDéfautRequisDescription
contrastMode""custom" | "black-on-white" | "white-on-black"""custom"—Preset de contraste simple (noir/blanc inversable)
lineStyle""solid" | "dashed"""solid"—Style de trait recommandé (plein ou pointillé)
sizenumber40—Grid cell size in pixels
strokeWidthnumber1—Width of grid lines
dashedbooleanfalse—Use dashed lines instead of solid
colorstring"rgba(0, 0, 0, 0.1)"—Color of the grid lines
mask"none" | "radial""none"—Apply radial gradient mask

Usage

tsx
import { GridPattern } from "@brickslab/ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-white">
      <GridPattern
        contrastMode="black-on-white"
        lineStyle="solid"
        size={40}
        strokeWidth={1}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold">Grid Pattern</h1>
      </div>
    </div>
  );
}

Variations

Noir sur Blanc (Pointillés)

Black / White dashed

Blanc sur Noir (Trait Plein)

White / Black solid

Blanc sur Noir (Pointillés)

White / Black dashed