backgrounds

Diagonal Dots Background

A server component that renders polka dots woven over diagonal conic-stripe bands — a textured weave pattern as a full-bleed absolute background layer. Zero JS, zero SVG. Base derives from --background, bands from --foreground (7% opacity), and dots from --primary (20% opacity) for theme-adaptive rendering on light and dark.

Ported from MikeAndrewDesigner (MIT)

diagonal-dots-bg

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/diagonal-dots-bg

Usage

Usagetsx

<DiagonalDotsBg />

Props

Prop	Type	Default	Description
size	number	60	Tile size in pixels (controls spacing of dots and diagonal bands). Default: 60.
fade	boolean	false	Apply a radial fade-out mask toward edges. Default: false.

Source

diagonal-dots-bg.tsxtsx

import type React from "react";

export interface DiagonalDotsBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Tile size in pixels (controls spacing of dots and diagonal bands). Default: 60. */
  size?: number;
  /** Apply a radial fade-out mask toward edges. Default: false. */
  fade?: boolean;
}

/**
 * Polka-dot grid over diagonal conic-stripe bands — a textured weave background layer
 * (server component, zero JS). Place in a `relative` parent; fills it absolutely.
 * Colors derive from --background, --foreground, and --primary tokens.
 */
export function DiagonalDotsBg({
  size = 60,
  fade = false,
  className = "",
  style,
  ...props
}: DiagonalDotsBgProps) {
  const s = `${size}px`;
  const s2 = `${size * 2}px`;
  const sHalf = `${size * 0.5}px`;

  // Token mapping per BG-CONTRACT:
  //   base / canvas → var(--background)
  //   diagonal conic bands → color-mix(in oklch, var(--foreground) 7%, transparent)
  //   dots → color-mix(in oklch, var(--primary) 20%, transparent)
  const base = "var(--background)";
  const band = "color-mix(in oklch, var(--foreground) 7%, transparent)";
  const dot = "color-mix(in oklch, var(--primary) 20%, transparent)";

  // Quarter-circle radial (equiv. to --_g in original) — fills tile corners with base color
  const g = `radial-gradient(25% 25% at 25% 25%, ${base} 99%, transparent 101%)`;

  // 4-layer background (top → bottom):
  //   L1: offset quarter-circle to form dot-center mask
  //   L2: corner quarter-circle aligned to tile origin
  //   L3: full circle dots (primary tint)
  //   L4: diagonal repeating-conic stripes (foreground tint over base)
  const background = [
    `${g} ${s} ${s} / ${s2} ${s2}`,
    `${g} 0 0 / ${s2} ${s2}`,
    `radial-gradient(50% 50%, ${dot} 98%, transparent 100%) 0 0 / ${s} ${s}`,
    `repeating-conic-gradient(${band} 0 50%, ${base} 0 100%) ${sHalf} 0 / ${s2} ${s}`,
  ].join(", ");

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        background,
        ...(fade
          ? {
              // mask alpha — not a UI color
              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