Shadows

Use shadow to add depth cues by projecting a shadow from the component.

Type signature

type Shadow = {
  distance: number | string;
  spacingX: number;
  spacingY: number;
};

Supported components

• IsometricCube
• IsometricPlane
• IsometricGrid

Example

import { Isometric } from "isometric-react/isometric";
import { IsometricPlane } from "isometric-react/isometric-plane";
import "isometric-react/isometric.css";

export function PlaneShadow() {
  return (
    <Isometric>
      <IsometricPlane
        size={{ width: 8, height: 8 }}
        color="#4f8bff"
        shadow={{ distance: 3, spacingX: 1, spacingY: 1 }}
      />
    </Isometric>
  );
}

Rendered example

Fields

Field	Type	Description
distance	number | string	How far the shadow is projected from the object.
spacingX	number	Horizontal shadow direction multiplier.
spacingY	number	Vertical shadow direction multiplier.

Increase distance for softer, farther shadows. Use spacingX and spacingY to control direction.