Brickslab.Tools

@brickslab./ui-web

Static SVG dot matrix pattern with configurable dot size gap and opacity

Dots

Props

Prop	Type	Défaut	Requis	Description
`dotWeight`	`""very-thin" \| "thin" \| "medium""`	`"medium"`	—	Preset simple pour l'épaisseur des points
`dotSize`	`number`	`undefined`	—	Taille custom des points (prioritaire sur dotWeight)
`gap`	`number`	`20`	—	Space between dots in pixels
`offset`	`number`	`0`	—	Initial offset of the dot pattern
`opacity`	`number`	`0.5`	—	Opacity of the dots (0-1)
`color`	`string`	`"rgba(255, 255, 255, 0.5)"`	—	Color of the dots

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  dotWeight="medium"
  dotSize={undefined}
  gap={20}
  offset={0}
  opacity={0.5}
  color="rgba(255, 255, 255, 0.5)"
/>

dotWeightdotSizegapoffsetopacitycolor

Usage

tsx

import { DotPattern } from "@brickslab./ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-white">
      <DotPattern dotWeight="thin" gap={20} opacity={0.3} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold">Dot Pattern</h1>
      </div>
    </div>
  );
}

Variations

Points Très Fins

Très fin

Points Fins

Fin

Points Moyens

Moyen