Getting started

@jugaaadi/view-cube is a controlled React view cube: faces, edges and corners to click, double click to fit, drag with magnetic snap, a home button and transition timing. It is plain DOM and CSS 3D, has no three.js and no runtime dependencies, and is safe to render on the server.

The cube never moves a camera. Your app passes the current camera orientation in; the cube calls back with the target view (angles, world direction, up vector, quaternion and timing) and your app animates its own camera.

Install

pnpm add @jugaaadi/view-cube

Peer dependency: react 18 or 19.

import { ViewCube } from '@jugaaadi/view-cube';
import '@jugaaadi/view-cube/styles.css';

Smallest working cube

import { useState } from 'react';
import { ViewCube } from '@jugaaadi/view-cube';
import '@jugaaadi/view-cube/styles.css';

export function Example() {
  const [view, setView] = useState({ pitch: 45, yaw: 45 });
  return <ViewCube orientation={view} onViewChange={(target) => setView({ pitch: target.pitch, yaw: target.yaw })} />;
}

Pitch 0 is the top view, 90 a side view and 180 the bottom; yaw 0 looks at Front and 90 at Right. To animate instead of jumping, see Connect to your camera.

The home button

The home button sits beside the cube, never on it, as in Fusion 360 and Onshape. It goes below the cube by default; homePlacement moves it above, left or right. The gap is worked out from how far the cube's face, edge and corner zones can reach at any orientation, so on a touch screen the 44 px home target never covers a face, edge or corner. Turn it off with features={{ homeButton: false }} or replace it with renderHomeButton.

Keyboard and screen readers

Every face, edge and corner is a named button (Top, Top Front edge, Top Front Right corner) reachable with Tab and activated with Enter or Space. The root is a group named View cube.