backgrounds

Graph Paper Pattern

A full-bleed crosshatch grid background that replicates classic graph paper using two overlapping CSS linear-gradients — one horizontal, one vertical — each painting a ~2% band at the 25 % and 75 % stops of every cell. The cell pitch is configurable via a `cellSize` prop (default 55 px). The component fills its positioned parent via `position: absolute; inset: 0`, so it's dropped into any `position: relative` wrapper without extra markup. Colors are token-driven: the background surface is `--background` and the grid lines are `--border`, so the pattern reads correctly on both light and dark themes with no dark-specific overrides.

Ported from kennyotsu-monochromia (MIT)

graph-paper-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/graph-paper-pattern

Usage

Usagetsx

<GraphPaperPattern />

Props

Prop	Type	Default	Description
cellSize	number	55	Size of each grid cell in px (default 55). Controls the repeat period of the crosshatch lines.
className	string		Additional class names merged onto the root element. Useful for rounding corners or constraining the fill region.
style	React.CSSProperties	—	Inline style overrides forwarded to the root.

Source

graph-paper-pattern.tsxtsx

import type React from "react";
import styles from "./graph-paper-pattern.module.css";

export type GraphPaperPatternProps = {
  /**
   * Size of each grid cell in px (default 55).
   * Controls the repeat period of the crosshatch lines.
   */
  cellSize?: number;
  /**
   * Additional class names merged onto the root element.
   * Useful for rounding corners or constraining the fill region.
   */
  className?: string;
  /** Inline style overrides forwarded to the root. */
  style?: React.CSSProperties;
};

/**
 * GraphPaperPattern — a full-bleed crosshatch grid painted with two overlapping
 * linear gradients. Fills its positioned parent via `position: absolute; inset: 0`.
 * Wrap in a `position: relative` container to confine the pattern.
 *
 * Server component: no JS, no hydration, no animation — pure CSS art.
 */
export function GraphPaperPattern({
  cellSize = 55,
  className = "",
  style,
}: GraphPaperPatternProps) {
  const rootStyle = {
    ...style,
    "--cell-size": `${cellSize}px`,
  } as React.CSSProperties & Record<string, string>;

  return (
    <div
      aria-hidden="true"
      className={[styles.root, className].filter(Boolean).join(" ")}
      style={rootStyle}
    />
  );
}

Dependencies

@bottega/tokens