caliper uidocs
DemoSign inGet Pro

Cube flow

Pro

A four-step flow on the four sides of a cube. Continue turns one face away, Back turns it back, and from the last face the next turn comes round to the first, so starting over is one more turn, not a jump. The step list beside it shows where you are and reaches completed steps.

Installs components/ui/cube-flow.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/cube-flow

Create your account

Step 1 of 3

Name your team

Step 2 of 3

Choose a plan

Step 3 of 3

You are in

Workspace ready

Email
Name
Team
Plan

When to use #

Use it for

  • Short setup flows of three to five steps, such as creating a workspace.
  • Anywhere direction helps people remember where they are.

Skip it when

  • Long forms or flows with branches; use the stepper.
  • Flows where people jump freely between steps.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Validation happens in place
Continue runs the step's validate. Errors are announced, the first failing field takes focus, and the face does not turn until it passes.
Only the current face is reachable
The other faces are inert, each is a labelled section, and a live region says the step. Focus moves to the new face after every turn.

Usage

Values stay with you
The parent owns the fields, so what was typed survives turning, a loading state and an error.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/cube-flow

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { CubeFlow } from "@/components/ui/cube-flow"

The worked example comes with Pro

The 97-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

CubeFlow

component
PropTypeDefaultDescription
label *string—Names the flow for screen readers, for example "Create a workspace".
steps *readonly CubeStep[]—Two to six steps; four make a cube. The last one is the finished face.
stepnumber—The index of the current step. Controlled when set.
defaultStepnumber0
onStepChange((step: number) => void)—
onComplete(() => void)—Called once when every step before the last has passed and the last face turns in.
onRestart(() => void)—Called when the last face turns back round to the first. Clear the values here.
restartLabelstring"Start over"
statusDepthStatus"ready"
messagesDepthMessages—
onRetry(() => void)—
disabledboolean—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-invalid, aria-label, aria-current, aria-hidden and aria-live in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.