backgrounds

Checkerboard Background

A server component that renders a tileable two-tone checkerboard background layer using repeating-conic-gradient. Zero JS — squares alternate between --background and a subtle color-mix(--foreground 8%, transparent) so the pattern reads on both light and dark themes. Place in a relative parent; the layer fills it absolutely with pointer-events-none.

Ported from atishaytuli07 (MIT)

checkerboard-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/checkerboard-bg

Usage

Usagetsx

<CheckerboardBg />

Props

Prop	Type	Default	Description
size	number	14	Side length of each checker square in pixels. Default: 14.
fade	boolean	true	Apply a radial fade-out mask toward edges. Default: true.

Source

checkerboard-bg.tsxtsx

import type React from "react";

export interface CheckerboardBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Side length of each checker square in pixels. Default: 14. */
  size?: number;
  /** Apply a radial fade-out mask toward edges. Default: true. */
  fade?: boolean;
}

/**
 * Two-tone checkerboard background layer (server component, zero JS).
 * Fills a `relative` parent absolutely. Checker squares use `--background`
 * and a subtle `color-mix(--foreground 8%, transparent)` so the pattern
 * reads on both light and dark themes. Drop it behind any content.
 */
export function CheckerboardBg({
  size = 14,
  fade = true,
  className = "",
  style,
  ...props
}: CheckerboardBgProps) {
  // repeating-conic-gradient is the canonical one-declaration checker
  const checker =
    `repeating-conic-gradient(` +
    `var(--background) 0% 25%, ` +
    `color-mix(in oklch, var(--foreground) 8%, transparent) 25% 50%` +
    `)`;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        backgroundColor: "var(--background)",
        backgroundImage: checker,
        backgroundSize: `${size}px ${size}px`,
        ...(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