backgrounds

Polka Dot Background

A server component that renders a bold two-tone offset polka-dot background layer using two radial-gradient grids offset by half a cell so dots interleave (~100px cells by default). Zero JS — dot color derives from --primary at 22% opacity, canvas from --background. Place in a relative parent; the layer fills it absolutely with pointer-events-none.

Ported from uiverse-astronaut (MIT)

polka-dot-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/polka-dot-bg

Usage

Usagetsx

<PolkaDotBg />

Props

Prop	Type	Default	Description
cell	number	100	Grid cell size in pixels. Dots are ~10% of the cell radius. Default: 100.

Source

polka-dot-bg.tsxtsx

import type React from "react";

export interface PolkaDotBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Grid cell size in pixels. Dots are ~10% of the cell radius. Default: 100. */
  cell?: number;
}

/**
 * Bold two-tone offset polka-dot background layer (server component, zero JS).
 * Two radial-gradient grids offset by half a cell so dots interleave.
 * Colors derive from --primary (dots) and --background (canvas).
 * Place in a `relative` parent — fills it absolutely.
 */
export function PolkaDotBg({
  cell = 100,
  className = "",
  style,
  ...props
}: PolkaDotBgProps) {
  const dot = "color-mix(in oklch, var(--primary) 22%, transparent)";
  const half = cell / 2;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        backgroundColor: "var(--background)",
        backgroundImage: [
          `radial-gradient(${dot} 10%, transparent 10%)`,
          `radial-gradient(${dot} 10%, transparent 10%)`,
        ].join(", "),
        backgroundSize: `${cell}px ${cell}px`,
        backgroundPosition: `0 0, ${half}px ${half}px`,
        ...style,
      }}
      {...props}
    />
  );
}

Dependencies

@bottega/tokens