IsometricGrid

IsometricGrid renders a configurable isometric grid. It is useful for scene alignment, level layouts, and visual guides.

Import

import { IsometricGrid } from "isometric-react/isometric-grid";

Props

Prop	Type	Required	Description
size	number | string	Yes	Base grid size value.
sizeMultiplier	SizeMultiplier	No	Multiplier applied to grid size calculations.
color	string	No	Grid line color override.
lineweight	number	No	Thickness of grid lines.
as	React.ElementType	No	Polymorphic element type.
position	Position	No	Offsets and elevation values.
shadow	Shadow	No	Shadow distance and spacing settings.
shadowAnimation	ShadowAnimation	No	Animated shadow configuration.
rotation	Rotation	No	Rotation animation configuration.

Basic usage

import { IsometricGrid } from "isometric-react/isometric-grid";

export function BasicGrid() {
  return <IsometricGrid size={10} />;
}

Rendered example

With optional props

import { IsometricGrid } from "isometric-react/isometric-grid";

export function StyledGrid() {
  return (
    <IsometricGrid
      size={10}
      sizeMultiplier={1}
      color="#6f7f92"
      lineweight={1}
      as="section"
      position={{ top: 0, left: 0, elevation: 0 }}
      shadow={{ distance: 1, spacingX: 1, spacingY: 1 }}
    />
  );
}

Supported shared props

• Position
• Shadow
• ShadowAnimation
• Rotation
• Polymorphic as prop

IsometricGrid does not support border or edge.