Cube Tabs

anime.js

Four tabs on the faces of a cube that turns the short way and settles.

Latency8 weeks

840

ms p50

Down 12% since the reranker moved in-region.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/cube-tabs.json

Also installs animejs.

Usage

import { CubeTabs } from "@/components/spotcheck/cube-tabs"

<CubeTabs
  label="Metrics"
  faces={[
    { value: "latency", label: "Latency", content: <LatencyPanel /> },
    { value: "cost", label: "Cost", content: <CostPanel /> },
    { value: "quality", label: "Quality", content: <QualityPanel /> },
    { value: "volume", label: "Volume", content: <VolumePanel /> },
  ]}
/>

A cube has four sides to turn through, so faces takes exactly four and TypeScript holds you to it. Each face holds your own content in a 250px tall panel.

Going from the first tab to the last turns one face back, not three forward. Faces turned away are inert, so nothing on them can be reached by keyboard or screen reader.

Props

label * RequiredstringDefault —Names the tab list for screen readers.
faces * Required[CubeFace, CubeFace, CubeFace, CubeFace]Default —Exactly four faces. Each one holds your own content.
valuestringDefault —The selected face's value, when you control it.
defaultValuestringDefault —The starting value, when the tabs manage themselves.
onValueChange(value: string) => voidDefault —Runs when a different face is selected.
classNamestringDefault —Added to the outer element.

Keyboard

← →	Move to the next tab, wrapping at the ends
Home	Jump to the first tab
End	Jump to the last tab

Reduced motion

The cube jumps to the face with no turn.