Data cube

Pro

Three dimensions in one object: region by product by quarter. Pick which dimension is depth, step through its layers, and read the layer you are on as an ordinary table beside it, with the peak in bold.

Installs components/ui/data-cube.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/data-cube

Quarter

Revenue, Quarter Q3: Region by Product, in thousands of dollars
Q3	Free	Team	Pro	Enterprise
EMEA	68k	93k	46k	71k
AMER	58k	83k	108k	133k (peak)
APAC	76k	101k	54k	79k
LATAM	44k	69k	94k	119k

Layer 3 of 4 · Quarter Q3 · Region by Product · peak 133k

When to use #

Use it for

Data that really has three dimensions and people switch which one they slice by.
Showing that a table is one slice of something larger.

Skip it when

Two dimensions; use a heatmap or a pivot table.
Reading exact values from the picture. The table is for that.

Decisions #

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

Behaviour

The table is the answer: The cube shows where you are in the data; the table holds the same numbers in full. A real slider with a value text steps the layers.

Styling

Chosen layer forward, the rest dim: Layers move along one axis and the others fade to 28 percent, so the slice you are reading is the one you can see.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/data-cube

Adds its 7 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 { DataCube } from "@/components/ui/data-cube"

The worked example comes with Pro

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

Checking your licence…

API reference #

DataCube

component

PropTypeDefaultDescription

labelstring"Values"What the numbers are, for the table caption, for example "Revenue".

dimensions *readonly [DataCubeDimension, DataCubeDimension, DataCubeDimension]—Exactly three dimensions.

values *readonly (readonly (readonly number[])[])[]—

depthstring—The id of the dimension drawn as depth. Controlled when set.

defaultDepthstring—

onDepthChange((dimensionId: string) => void)—

layernumber—The chosen layer along the depth dimension. Controlled when set.

defaultLayernumber0

onLayerChange((layer: number) => void)—

format((value: number) => string)(n: number) => n.toLocaleString("en-US")How a number is written in the table and the readout.

unitstring—Said once in the table caption, for example "in thousands of dollars".

statusDepthStatus"ready"

messagesDepthMessages—

onRetry(() => void)—

disabledboolean—

classNamestring—

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.