backgrounds

Dot Pattern

A server component that renders a tileable CSS dot-grid background layer using radial-gradient. Zero JS, zero SVG — dots derive color from --border. Place in a relative parent; the layer fills it absolutely with pointer-events-none.

dot-pattern

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/dot-pattern

Usage

Usagetsx

<DotPattern />

Props

Prop	Type	Default	Description
size	number	1	Dot diameter in pixels. Default: 1.
gap	number	16	Distance between dot centers in pixels. Default: 16.
fade	boolean	true	Apply a radial fade-out mask toward edges. Default: true.

Source

dot-pattern.tsxtsx

import type React from "react";

export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Dot diameter in pixels. Default: 1. */
  size?: number;
  /** Distance between dot centers in pixels. Default: 16. */
  gap?: number;
  /** Apply a radial fade-out mask toward edges. Default: true. */
  fade?: boolean;
}

/**
 * Tileable dot-grid background layer (server component, zero JS).
 * Meant to be placed in a `relative` parent — fills the parent absolutely.
 */
export function DotPattern({
  size = 1,
  gap = 16,
  fade = true,
  className = "",
  style,
  ...props
}: DotPatternProps) {
  const bg = `radial-gradient(circle, var(--border) ${size}px, transparent ${size}px)`;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        backgroundImage: bg,
        backgroundSize: `${gap}px ${gap}px`,
        ...(fade
          ? {
              // mask alpha (opacity gradient) — not a UI color; no token applies
              maskImage:
                "radial-gradient(ellipse 80% 80% at 50% 50%, rgb(0 0 0 / 1) 40%, transparent 100%)",
              WebkitMaskImage:
                "radial-gradient(ellipse 80% 80% at 50% 50%, rgb(0 0 0 / 1) 40%, transparent 100%)",
            }
          : {}),
        ...style,
      }}
      {...props}
    />
  );
}

Dependencies

@bottega/tokens