backgrounds

Plaid Lines Background

A server component that renders a tri-directional diagonal plaid background layer using three overlapping repeating-linear-gradients (60°/120°/180°). Zero JS — stripes derive color from --foreground at low alpha over --background, building argyle/tartan depth through layer overlap. Place in a relative parent; fills it absolutely with pointer-events-none.

Ported from aadium (MIT)

plaid-lines-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/plaid-lines-bg

Usage

Usagetsx

<PlaidLinesBg />

Props

Prop	Type	Default	Description
size	number	22	Period in pixels between plaid lines. Controls line density. Default: 22 (≈3px line + 19px gap).
fade	boolean	false	Apply a radial fade-out mask toward edges. Default: false.

Source

plaid-lines-bg.tsxtsx

import type React from "react";

export interface PlaidLinesBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Period in pixels between plaid lines. Controls line density.
   * Default: 22 (≈3px line + 19px gap).
   */
  size?: number;
  /** Apply a radial fade-out mask toward edges. Default: false. */
  fade?: boolean;
}

/**
 * Tri-directional diagonal plaid background layer (server component, zero JS).
 * Three overlapping repeating-linear-gradients (60°/120°/180°) weave into an
 * argyle/tartan lattice. Colors derive from --foreground at low alpha over
 * --background. Place in a `relative` parent; fills it absolutely with
 * pointer-events-none.
 */
export function PlaidLinesBg({
  size = 22,
  fade = false,
  className = "",
  style,
  ...props
}: PlaidLinesBgProps) {
  // ponytail: thin-line-first stop order — 3px ink then wide gap so lines stay distinct;
  // 25% opacity lets three crossing sets intersect visibly (intersections ~50%) without washing
  const ink = "color-mix(in oklch, var(--foreground) 25%, transparent)";
  // line is ~13% of period (≈3px at default size=22); rest is transparent gap
  const lineW = Math.max(2, Math.round(size * 0.13));

  const stripe = (angle: number) =>
    `repeating-linear-gradient(${angle}deg, ${ink} 0px, ${ink} ${lineW}px, transparent ${lineW}px, transparent ${size}px)`;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        backgroundColor: "var(--background)",
        backgroundImage: [stripe(60), stripe(120), stripe(180)].join(", "),
        ...(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