Components
Box3D
CSS 3D-transform box with six visible faces, configurable tilt, depth, and hover lift.
Import
import { Box3D } from "@sigil-ui/components";Preview
Usage
<Box3D className="w-48 h-32">
<div className="p-4">Content inside the box</div>
</Box3D>Variants
<Box3D variant="container" className="w-40 h-28"><div className="p-3">Container</div></Box3D>
<Box3D variant="card" className="w-40 h-28"><div className="p-3">Card</div></Box3D>
<Box3D variant="panel" className="w-40 h-28"><div className="p-3">Panel</div></Box3D>Hover lift
<Box3D hoverLift depth={24} className="w-48 h-32">
<div className="p-4">Hover me</div>
</Box3D>Custom tilt and perspective
<Box3D tiltX={-15} tiltY={30} perspective={600} depth={30} className="w-48 h-32">
<div className="p-4">Tilted</div>
</Box3D>Props
| Prop | Type | Default | Description |
|---|---|---|---|
depth | number | 20 | Box depth 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" | Visual preset |
hoverLift | boolean | false | Lift on hover |
children | ReactNode | — | Front face content |
className | string | — | Additional CSS classes |