# Shadcn Digital Twin blocks

> Interactive 3D scenes of physical places on React Three Fiber, a stadium sector picker and a live kart race, each synced with a 2D plan.

- Type: Pro blocks (Solutions)
- Page: https://reui.io/blocks/solutions/digital-twin
- Blocks: 2
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## When to use

- Match day tickets sold by sector, the sector picked on a 3D stadium bowl you orbit or on a 2D seating plan
- Live race timing, karts lapping a 3D circuit and one pick shared by the plan, the gap ladder and the standings
- A 3D model of a physical place that shares its selection with a 2D plan and the panels around it

## When not to use

- A diagram of nodes and edges for a process or a system, not a physical place: use the [Flow blocks](https://reui.io/blocks/application/flow.md)
- A month card of upcoming fixtures and their kickoff times, with no venue or seats to pick: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- Venue or site figures as KPI tiles and charts, with nothing to pick in a scene: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)

## Agent notes

- `@react-three/fiber` lists React 19 as a peer, so a React 18 app must upgrade React before adding a block
- `three` ships no type declarations, so a TypeScript project also needs @types/three as a dev dependency
- Both consoles pin the `dark` class on their root, so they render dark inside a light app whatever its theme

## Third-party libraries

- three.js: [API reference](https://threejs.org/docs/), [docs](https://threejs.org/manual/#en/fundamentals), used by 2 of 2 blocks (pre-1.0, so any 0.x release (r186 here) can change the API, and threejs.org documents only the latest)
- React Three Fiber v9: [API reference](https://r3f.docs.pmnd.rs/api/canvas), [docs](https://r3f.docs.pmnd.rs/getting-started/introduction), used by 2 of 2 blocks
- camera-controls v3: [API reference](https://yomotsu.github.io/camera-controls/classes/CameraControls.html), [docs](https://github.com/yomotsu/camera-controls#readme), used by 2 of 2 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 1 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 1 of 2 blocks

## Blocks

- [Stadium Seats](https://reui.io/blocks/solutions/digital-twin/solution-digital-twin-1.md): 3D stadium seat picker by sector for match tickets, with a synced 2D seating plan and price timeline. Best for a buyer-facing ticket page that sells best available by sector, with the 3D stadium as the sector map and the camera facing each pick.
- [Kart Live Timing](https://reui.io/blocks/solutions/digital-twin/solution-digital-twin-2.md): Live kart race timing on a 3D circuit, with a gap to leader ladder, live standings and a driver card. Best for a dark live timing screen for a short race, where a kart picked on the circuit, the plan, the ladder or the standings is followed everywhere.

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.