Preview

Import

import { IsometricScene } from "@sigil-ui/components";

<IsometricScene width="100%" height={260} showGrid><IsometricPrism width={120} height={80} depth={60} /></IsometricScene>

<IsometricScene showGrid={false}>
  <IsometricCylinder />
</IsometricScene>

<IsometricScene gridSize={16} height={400}>
  <IsometricPrism width={60} height={40} depth={60} />
</IsometricScene>

<IsometricScene width="100%" height={500}>
  <div className="flex gap-8">
    <IsometricPrism />
    <IsometricCylinder />
  </div>
</IsometricScene>

Prop	Type	Default	Description
`showGrid`	`boolean`	`true`	Show isometric grid lines
`gridSize`	`number`	`32`	Grid cell size in pixels
`width`	`number \| string`	`"100%"`	Container width
`height`	`number \| string`	`300`	Container height
`children`	`ReactNode`	—	Scene content
`className`	`string`	—	Additional CSS classes