IsometricCube

IsometricCube renders a cube using a required size and depth, with individual faces added through IsometricCube.Side.

Import

import { IsometricCube } from "isometric-react/isometric-cube";

Props (IsometricCube)

Prop	Type	Required	Description
size	{ width: number; height: number }	Yes	Base cube dimensions.
depth	number	Yes	Cube depth.
children	React.ReactNode	No	Usually one or more IsometricCube.Side elements.
as	React.ElementType	No	Polymorphic element type.
position	Position	No	Offsets and elevation values.
border	Border	No	Border styling for rendered faces.
shadow	Shadow	No	Shadow distance and spacing settings.
shadowAnimation	ShadowAnimation	No	Animated shadow configuration.
rotation	Rotation	No	Rotation animation configuration.

Props (IsometricCube.Side)

Prop	Type	Required	Description
side	"top" | "front-left" | "front-right" | "bottom" | "back-left" | "back-right"	Yes	Which cube face to render.
children	React.ReactNode	Yes	What to render inside the face.

Basic usage

import { IsometricCube } from "isometric-react/isometric-cube";

export function BasicCube() {
  return (
    <IsometricCube size={{ width: 5, height: 5 }} depth={2}>
      <IsometricCube.Side side="top" />
      <IsometricCube.Side side="front-left" />
      <IsometricCube.Side side="front-right" />
      <IsometricCube.Side side="bottom" />
      <IsometricCube.Side side="back-left" />
      <IsometricCube.Side side="back-right" />
    </IsometricCube>
  );
}

Rendered example

TOP

FRONT LEFT

FRONT RIGHT

With optional props

import { IsometricCube } from "isometric-react/isometric-cube";

export function StyledCube() {
  return (
    <IsometricCube
      size={{ width: 5, height: 5 }}
      depth={2}
      as="section"
      position={{ top: 2, left: 1, elevation: 1 }}
      border={{ size: 1, style: "solid", color: "#2f2f2f" }}
      shadow={{ distance: 2, spacingX: 1, spacingY: 1 }}
    >
      <IsometricCube.Side side="top" />
      <IsometricCube.Side side="front-left" />
      <IsometricCube.Side side="front-right" />
    </IsometricCube>
  );
}

Supported shared props

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

IsometricCube does not support the edge prop.