Positioning

Use the position prop to offset a component on the isometric plane and control its elevation.

Type signature

type Position = {
  top?: number | string;
  left?: number | string;
  elevation?: number | string;
};

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 PositionedPlane() {
  return (
    <Isometric>
      <IsometricPlane
        size={{ width: 8, height: 8 }}
        color="#4f8bff"
        position={{ top: 2, left: -1, elevation: 1 }}
      />
    </Isometric>
  );
}

Rendered example

Fields

Field	Type	Description
top	number | string	Vertical offset on the isometric plane.
left	number | string	Horizontal offset on the isometric plane.
elevation	number | string	Elevates or lowers the element on the Z axis.

Numeric values use the library defaults. String values let you provide explicit CSS units like "2rem" or "16px".