Cube
betaContent on the faces of a cube that turns to show one face at a time — a carousel in three dimensions, by buttons, arrow keys or drag.
- Display
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add cubeNo npm packages are needed beyond what Dowel already requires.
import { Cube } from "@/components/ui/cube";Default
Auto Rotate
Six Faces
<Cube>
| Prop | Type | Default |
|---|---|---|
faces (required)Four faces turn around; six add a top (fifth) and a bottom (sixth). | CubeFace[] | — |
label (required)Names the cube. | string | — |
autoRotateTurn to the next face every this many milliseconds. Off by default. | number | — |
controlsShow previous and next buttons. Default true. | boolean | true |
defaultValue | number | 0 |
onValueChange | (index: number) => void | — |
sizeEdge length in pixels. Default 240. | number | 240 |
valueThe face in front, controlled. | number | — |
Plus every attribute of <section> except onChange.
A carousel to assistive technology (aria-roledescription), each face a labelled slide ("2 of 4: Speed"). Faces turned away are inert and hidden, so focus never reaches them. Previous and next buttons, the arrow keys on the focused cube (Up and Down for the top and bottom), Home and End, and a horizontal drag all turn it, and a status line names the face. Auto-rotation pauses on hover and focus, never runs under reduced motion, and is not announced. The turn is on the motion scale, so under reduced motion the face just changes.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes