sigilUI

Isometric Prism

Render a prism with token-styled faces.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

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

Usage

<IsometricPrism width={160} height={100} depth={80} />

Props

PropTypeDefaultDescription
widthnumber—Width of the rendered content.
heightnumber—Height of the rendered content.
depthnumber—Depth configuration.
borderRadiusnumber—Border Radius configuration.
topColorstring—Top Color configuration.
leftColorstring—Left Color configuration.
rightColorstring—Right Color configuration.
strokeColorstring—Stroke Color configuration.
strokeWidthnumber—Stroke Width configuration.
childrenReactNode—Content rendered inside the component.

Token integration

CSS VariablePurpose
--s-primaryPrimary
--s-surfaceSurface
--s-surface-elevatedSurface elevated
--s-borderBorder