# Stadium Seats block

> 3D stadium seat picker by sector for match tickets, with a synced 2D seating plan and price timeline

Match day ticket sales on a 3D stadium bowl you orbit, with sector prices, up to 6 seats per order, a view from the picked sector and sales stats. ReUI Frame, Badge; shadcn ToggleGroup, Dialog, Slider; React Three Fiber. Seating chart, ticketing.

- Type: Pro block
- Category: [Digital Twin](https://reui.io/blocks/solutions/digital-twin.md)
- Page: https://reui.io/blocks/solutions/digital-twin/solution-digital-twin-1
- MCP: `get_block("solution-digital-twin-1")`
- Built with: Badge, Button, Button Group, Dialog, Frame, Progress, Slider, Spinner, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## 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

## Agent notes

- Swap `FIXTURE`, `VENUE`, `DAILY_SALES` and `SALES_START` for your event and replace the hashed prices and seats left in `buildSectors`; `TIERS` shapes the bowl
- `checkout` only fires a sonner `toast` whose 10 minute hold is demo copy, seen once your app mounts a Toaster; send the sector and seat count to your hold API
- `TicketConsole`, `InsightRail`, `PriceTimeline` and `SeatView` read `SECTORS`, `SECTOR_BY_ID` or `TIMELINE` directly; pass live sectors to all 4

## When not to use

- The buyer details and card payment step after a sector and seat count are chosen: use the [Checkout blocks](https://reui.io/blocks/ecommerce/checkout.md)

## Third-party libraries

- three.js: [API reference](https://threejs.org/docs/), [docs](https://threejs.org/manual/#en/fundamentals) (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)
- camera-controls v3: [API reference](https://yomotsu.github.io/camera-controls/classes/CameraControls.html), [docs](https://github.com/yomotsu/camera-controls#readme)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-digital-twin-1
```

## About Digital Twin blocks

### 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

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.