KQ-071 · FACET/CUBE
Facet Cube
A six-face content cube with real CSS geometry — drag to rotate with per-pixel resistance, release and it snaps both axes to the nearest 90° detent, or walk faces with the arrow keys; the facing face is announced on settle.
KQ-071 · FACET/CUBE
Specimen Bays · 6 FacesKQ-071
Face 1 of 6: BAY A
Facing · BAY A · SEALED
Drag the cube or use the arrow keys - it settles on the nearest face.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/facet-cube
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| faces | ReactNode[] | — | Up to six face plates; missing faces render empty. |
| labels | string[] | — | Per-face names for the screen-reader announcement. |
| size | number | 220 | Cube edge in px; the wrapper pads for mid-turn corners. |
| defaultFace / onFaceChange | number / (index) => void | — | Starting face and the settle callback. |