For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A month card of upcoming fixtures and their kickoff times, with no venue or seats to pick: use the Schedule blocks
- Venue or site figures as KPI tiles and charts, with nothing to pick in a scene: use the Dashboard blocks
Agent notes
@react-three/fiberlists React 19 as a peer, so a React 18 app must upgrade React before adding a blockthreeships no type declarations, so a TypeScript project also needs @types/three as a dev dependency- Both consoles pin the
darkclass on their root, so they render dark inside a light app whatever its theme
Third-party API docs
- three.js: API reference, docs, 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, docs, used by 2 of 2 blocks
- camera-controls v3: API reference, docs, used by 2 of 2 blocks
- Motion v12: API reference, docs, used by 1 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: API reference, docs, used by 1 of 2 blocks
Markdown
https://reui.io/blocks/solutions/digital-twin.mdMCP
search({ query: "digital twin", type: "block", category: "digital-twin" })3D Digital Twin Blocks for React: a Stadium and a Race Circuit
A digital twin puts a 3D model of a physical place at the center of the screen and drives it from the same data as the panels around it, so one pick shows up in every view. The first block is a match day ticket console for a 77,800 seat stadium: a buyer orbits a bowl of 70 sectors on 3 tiers or switches to a 2D seating plan, then picks a sector and a seat count, since seats sell best available within a sector. The second is a live timing console for a 20 lap night kart race, where 15 karts lap a 1,200 m circuit in 3D or on a 2D plan while a gap to leader ladder, live standings and a driver card follow the race.
Both scenes render on demand or per frame with React Three Fiber, and camera-controls handles orbit, pan, zoom and the camera move to a picked sector or a followed kart. Without WebGL 2 each block falls back to its 2D plan. The panels are ReUI Frame with Badge labels and shadcn ToggleGroup, ButtonGroup, Dialog, Progress and Slider.
All Digital Twin Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Stadium Seats 3D stadium seat picker by sector for match tickets, with a synced 2D seating plan and price timeline
- Kart Live Timing Live kart race timing on a 3D circuit, with a gap to leader ladder, live standings and a driver card
What the Digital Twin Blocks Cover
- 3D bowl and 2D plan Orbit, pan and zoom a 3 tier bowl of 70 sectors, or switch to a top-down plan where every open sector is a button you can reach by keyboard.
- Price timeline A bar per sector in walking order rises to its top price with a dot at its best available price, and arrow keys step through the open sectors.
- Seats and seat view The selection bar sets 1 to 6 seats at the sector's best available price plus a booking fee, and its thumbnail opens a rendered 24 second clip seen from that sector.
- 3D circuit and 2D plan 15 karts lap a 1,200 m circuit you orbit, pan and zoom, or a top-down plan; pick a helmet, a dot, a ladder entry or a standings row and the camera follows that kart.
- Gap to leader ladder Every kart on the lead lap sits at its interval to the leader on a scale that grows in 5 second steps, beside the race clock, the lap count and the fastest lap.
- Standings and driver card Positions, laps and best laps for all 15 drivers, and a card for the picked driver or the leader with the gap and the best lap.
Related Shadcn Block Categories
- Bookings Appointment and service-business admin pages for consultants, clinics, salons, and local services.
- Schedule Calendar and scheduling components with day, week, and month views for event management.
- Checkout Checkout flows with shipping details, payment forms, and order confirmation steps.
- Dashboard Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Flow Node canvas blocks on React Flow for workflow and agent builders, pipeline run replays, and impact maps.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (43) Browse 43 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (51) Browse 51 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
What makes these digital twins rather than 3D pictures?
Each model is drawn from the data behind it. In the stadium, every sector's seats left, prices and sold out status come from one data file that the bowl, the plan, the price timeline and the selection bar all read, so a pick anywhere is the one selection they all show. In the race, every kart's place on the circuit comes from the same timing functions that feed the gap ladder, the standings and the driver card. Swap that data for your own and every view reads the new numbers, but the stadium totals are worked out once when the page loads, so live seat counts mean passing the sectors in as props.
How do I load my own venue, fixture or race?
For the stadium, replace the fixture, venue, sector inventory and daily sales in the data file. A bowl of another size needs new tier sizes, sector counts and seats per sector in the geometry file, and another tier count also needs a wider tier type, new tier labels, tier prices, view scores and Tier Mix rows. For the race, replace the demo timing functions, the best laps and the race clock with your timing feed, and edit the circuit's control points to change the track. The circuit name, length and corner count shown on screen are a separate label.
Does Checkout reserve seats?
Not on its own. Checkout shows a toast saying the seats are held for 10 minutes, but nothing is held and the inventory stays as it was, so connect it to your basket or seat hold service. The selected sector and the seat count are already in state, and the total adds the booking fee to each seat. The toast shows only where your app already mounts a Sonner toaster.
Do the blocks follow my light or dark theme?
No. Both consoles pin the dark theme on their own root, so they render dark even inside a light page, and the stadium's seat view dialog does the same. The stadium scene still reads its colors from Tailwind tokens, while the race circuit uses fixed gray tones with each driver's color on the helmets and dots.
What do the blocks install?
The shadcn CLI adds each block with three.js, React Three Fiber and camera-controls, plus Sonner for the stadium and Motion for the race, ReUI Frame and Badge, and the shadcn components it uses. React Three Fiber needs React 19, so a React 18 project upgrades React first, and TypeScript projects also need the three.js type definitions as a dev dependency, because three.js ships without its own types.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.