Exploded Box 3D
Separate a dimensional box into visible layers.
Preview
Import
import { ExplodedBox3D } from "@sigil-ui/components";Usage
<ExplodedBox3D size={120} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 80 | Size of the front/back square in px. |
depth | number | 22 | Depth of the side faces in px. |
gap | number | 10 | Gap between the separated faces in px. |
variant | "container" | "card" | "panel" | container | Preset variant. |
showLabels | boolean | false | Show small face labels for diagram use. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-shadow-sm | Shadow sm |
--s-border-strong | Border strong |
--s-text-muted | Text muted |
--s-surface | Surface |
--s-text | Text |