Box 3D

Render a dimensional box with individually styled faces.

@sigil-ui/componentsReact

Preview

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

<Box3D className="w-full max-w-sm p-8" hoverLift><strong>Token-driven surfaces</strong><p>Move over the panel to explore its depth.</p></Box3D>

Prop	Type	Default	Description
`depth`	`number`	`20`	Depth of the box in px.
`tiltX`	`number`	`-10`	X-axis tilt in degrees.
`tiltY`	`number`	`20`	Y-axis tilt in degrees.
`perspective`	`number`	`800`	Perspective distance in px.
`variant`	`"container" \| "card" \| "panel"`	`container`	Preset variant.
`hoverLift`	`boolean`	`false`	Lift on hover.

Triangle

Render a triangular shape using the active design tokens.

Box3DGrid

Arrange dimensional boxes into a coordinated grid.