SVG isometric rectangular prism with configurable dimensions and per-face coloring.

Import

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

Preview

<IsometricPrism />

<IsometricPrism width={100} height={80} depth={100} topColor="var(--s-primary)" />

<IsometricPrism borderRadius={4} strokeWidth={2} />

<IsometricPrism
  topColor="oklch(0.7 0.15 160)"
  leftColor="oklch(0.5 0.12 160)"
  rightColor="oklch(0.6 0.12 160)"
/>

<IsometricPrism width={120} height={80} depth={120}>
  <span className="text-xs font-mono">DB</span>
</IsometricPrism>

Prop	Type	Default	Description
`width`	`number`	`80`	Prism width in isometric units
`height`	`number`	`60`	Prism height in isometric units
`depth`	`number`	`80`	Prism depth in isometric units
`borderRadius`	`number`	`0`	Corner rounding on polygon joins
`topColor`	`string`	`var(--s-primary)`	Top face fill
`leftColor`	`string`	`var(--s-surface)`	Left face fill
`rightColor`	`string`	`var(--s-surface-elevated)`	Right face fill
`strokeColor`	`string`	`var(--s-border)`	Edge stroke color
`strokeWidth`	`number`	`1`	Edge stroke width
`children`	`ReactNode`	—	Content overlaid on the top face
`className`	`string`	—	Additional CSS classes