Components
IsometricScene
Container with an isometric grid background for composing 3D primitives.
Import
import { IsometricScene } from "@sigil-ui/components";Preview
Usage
<IsometricScene>
<IsometricPrism />
</IsometricScene>Without grid
<IsometricScene showGrid={false}>
<IsometricCylinder />
</IsometricScene>Custom grid density
<IsometricScene gridSize={16} height={400}>
<IsometricPrism width={60} height={40} depth={60} />
</IsometricScene>Full-width scene
<IsometricScene width="100%" height={500}>
<div className="flex gap-8">
<IsometricPrism />
<IsometricCylinder />
</div>
</IsometricScene>Props
| 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 |