backgrounds

Isometric Cube Tile

A CSS-only seamlessly-tiling background layer that renders an isometric cube grid using eleven stacked conic-gradient and linear-gradient declarations. Three distinct cube faces (top, left, right) are painted at 58°/122°/238° angles with a mathematically correct 16.9:12.8 tile ratio, producing an infinite axonometric grid illusion with no SVG, no canvas, and no JavaScript. Face colors are mapped to design tokens via color-mix so the pattern adapts to both light and dark themes. Tile density is controlled by a single `unit` prop (default 5 px) that scales all gradients uniformly. Renders absolutely, covering its nearest positioned ancestor.

Ported from mobinkakei (MIT)

isometric-cube-tile

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/isometric-cube-tile

Usage

Usagetsx

<IsometricCubeTile />

Props

Prop	Type	Default	Description
unit	number	5	Size of one repeating tile unit in px (default 5). The tile scales linearly: larger values produce bigger cubes.
className	string		Additional class names merged onto the root element.
style	React.CSSProperties	—	Inline styles merged onto the root element.

Source

isometric-cube-tile.tsxtsx

import type React from "react";
import styles from "./isometric-cube-tile.module.css";

export type IsometricCubeTileProps = {
  /**
   * Size of one repeating tile unit in px (default 5).
   * The tile scales linearly: larger values produce bigger cubes.
   */
  unit?: number;
  /** Additional class names merged onto the root element. */
  className?: string;
  /** Inline styles merged onto the root element. */
  style?: React.CSSProperties;
};

/**
 * IsometricCubeTile — a CSS-only tiling background layer.
 * Position: absolute; inset: 0 so it fills any positioned parent.
 * The tile is built entirely from conic-gradient and linear-gradient layers
 * that together render a seamless isometric cube grid.
 * aria-hidden since it is purely decorative.
 */
export function IsometricCubeTile({
  unit = 5,
  className = "",
  style,
}: IsometricCubeTileProps) {
  const rootStyle: React.CSSProperties & Record<string, string | number> = {
    ...style,
    "--u": `${unit}px`,
  };

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

Dependencies

@bottega/tokens